javascript 如何在 DOM 中添加或附加“单击”事件侦听器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5369319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add or attach "click" event listener in DOM?
提问by Ashish Agarwal
Am not able to add events to a id. Though able to attach eventlistener onLoad but same not workingfor onClick or click. Can somebody help me to fix it?
我无法向 ID 添加事件。虽然能够附加事件侦听器 onLoad 但同样不适用于 onClick 或 click。有人可以帮我修复它吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" id="iphone-viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<title>Astro Wheel</title>
<script type="text/javascript">
function loaded() {
alert("Loaded")
var ele= document.getElementById("aries");
if (window.attachEvent)
{ ele.attachEvent('click', testFunction); }
else if (window.addEventListener)
{ ele.addEventListener('click', testFunction, true); }
// I am unable to register a event on #aries, below alerts giving "null" and "undefined" respectively
alert(ele.onclick);
alert(ele.click)
}
function testFunction(){
alert("Clicked")
}
window.addEventListener("load", function() { setTimeout(loaded, 100); }, true);
</script>
<style type="text/css">
body, ul, li, div, p { padding:0; margin:0; }
body { background:#444 url(bg.png); }
#wheel { position:absolute; z-index:1; width:320px; height:321px; overflow:hidden; }
#display1 { position:absolute; z-index:100; width:320px; height:321px; }
ul { position:absolute; z-index:10; width:320px; height:320px;
-webkit-transform-origin:50% 50%;
-webkit-transform:rotateZ(0rad);
text-align:center;
}
ul li { position:absolute; z-index:11; width:76px; height:88px; left:122px; top:22px; overflow:hidden;
-webkit-transform-origin:38px 138px;
-webkit-transition-timing-function:ease-out;
-webkit-transition-duration:800ms;
}
#aries {-webkit-transform:rotate(0deg) translate(0, -0px); }
#cancer {-webkit-transform:rotate(90deg) translate(0, -000px); }
#libra {-webkit-transform:rotate(180deg) translate(0, -0000px); }
#caprico { -webkit-transform:rotate(270deg) translate(0, -000px); }
</style>
</head>
<body>
<div id="wheel">
<div id="display1"></div>
<ul id="zodiac">
<li id="aries"><div>Aries</div></li>
<li id="cancer"><div>Cancer</div></li>
<li id="libra"><div>Libra</div></li>
<li id="caprico"><div>Caprico</div></li>
</ul>
<div id="ok"></div>
</div>
</body>
</html>
P.S. I am not allowed to use any framework.Testingon WEBKIT based mobile browser and Google Chrome only
PS 我不允许使用任何框架。仅在基于 WEBKIT 的移动浏览器和 Google Chrome 上进行测试
回答by Alnitak
Using
addEventListener(or IE'sattachEvent) doesn't change the contents of theonclickattribute - they're independent.There shouldn't be any need to time delay the
loaded()function - just do:window.addEventListener('load', loaded, false);If you're assuming W3C DOM event handling (which your
loadhandler does) then there's no need for the IE-onyattachEvent()call
使用
addEventListener（或 IE 的attachEvent）不会改变onclick属性的内容——它们是独立的。不应该有任何需要时间延迟
loaded()功能 - 只需执行以下操作：window.addEventListener('load', loaded, false);如果您假设 W3C DOM 事件处理（您的
load处理程序会这样做），则不需要 IE-onyattachEvent()调用
