onclick multiple event handling for external javascript_问答_开发者

onclick multiple event handling for external javascript

开发者 https://www.devze.com 2022-12-23 00:39 出处：网络

The problem: making a very simple style switcher with js (without inline event handling). This is probably easy to do. I\'ve confused myself with handling multiple onclick events however and just prop

相关专题：javascript

The problem: making a very simple style switcher with js (without inline event handling). This is probably easy to do. I've confused myself with handling multiple onclick events however and just proped everything up with inline. Anyone know how to handle multiple onclick events?

The Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><title>page 2</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" id="style" type="text/css" href="style.css" />
<script type="text/javascript" src="switcher.js"></script>
</head>
&开发者_开发技巧lt;body>
<h1>page 2</h1>
<hr/>
<div id="nav">
<ul id="pages">
<li><a href="#" id="style1" onclick="style_one()" >Style 1</a></li>
<li><a href="#" id="style2" onclick="style_two()">Style 2</a></li>
<li><a href="#" id="style3"  onclick="style_three()" >Style 3</a></li>
<li><a href="page3.htm">Page 3</a></li>
</ul>
<ul id="logout">
<li><a href="login.htm">Log Out</a></li>
</ul>
</div>
<hr/>
</body>
</html>

The external JS so far

function style_one()
{
document.getElementById("style").href="style1.css";
}

function style_two()
{
document.getElementById("style").href="style2.css";
}

function style_three()
{
document.getElementById("style").href="style3.css";
}

if (element.addEventListener) // most browsers
    element.addEventListener(eventName, listener, true);
else if (element.attachEvent) // IE
    element.attachEvent('on' + eventName, listener);

For instance:

function addDomListener: function(element, eventName, listener) {
    if (element.addEventListener) // most browsers
        element.addEventListener(eventName, listener, true);
    else if (element.attachEvent) // IE
        element.attachEvent('on' + eventName, listener);
}
addDomListener(document.getElementById("style"), "click", function () {
    //Handle onclick #1
});
addDomListener(document.getElementById("style"), "click", function () {
    //Handle onclick #2
});

Edit: Unless I'm not understanding the question...My brain's fried as I've been staring at code all day