Question

问题：用js制作一个非常简单的样式切换器（没有内联事件处理）。这可能很容易做到。我对处理多个onclick事件感到困惑，然而只是用内联方式提升了所有内容。任何人都知道如何处理多个onclick事件？

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>
<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>

到目前为止的外部JS

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";
}

Answer 1

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

例如：

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
});

编辑：除非我不理解这个问题......我的大脑因为我整天盯着代码而被炒了

onclick外部JavaScript的多个事件处理

1 个答案: