JS 关于事件处理程序机制
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 关于事件处理程序机制相关的知识，希望对你有一定的参考价值。
关于这个问题，自己也做了一下测试，算了，直接粘贴代码吧，若有问题，欢迎指出！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS DOM2事件处理程序</title>
</head>
<body>
<input id="btn" type="button" value="Click Me!"/>
<input id="btn1" type="button" value="Click Me!"/>
<input id="btn2" type="button" value="Click Me!"/>
<input id="btn3" type="button" value="Click Me!"/>
<input id="btn4" type="button" value="Click Me!"/>
<script>
// DOM2事件处理程序
//通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序的参数相同；这也意味着通过addEventListener()添加的匿名函数将无法移除；
var btn = document.getElementById(‘btn‘);
btn.addEventListener(‘click‘,function(){
alert(this.id);
},false);
btn.removeEventListener(‘click‘,function(){ // 此参数实际不同，因此没有效果！！！！！！！！
alert(this.id);
},false);
//以上第二个参数是完全不同的函数，改为下面即可：
var btn1= document.getElementById(‘btn1‘);
var handler = function(){
alert(this.id);
};
btn1.addEventListener(‘click‘,handler,false) ;
btn1.removeEventListener(‘click‘,handler,false); // 这样就有效了！
// IE事件处理机制
//IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接收相同的参数
var btn2 = document.getElementById(‘btn2‘);
btn2.attachEvent(‘onclick‘,function(){
alert("Clicked!")
});
// 注意：attachEvent()的第一个参数是“onclick”;在使用attachEvent()方法的情况下，时间处理程序会在全局作用域中运行，因此this 等于 window。
var btn3 = document.getElementById(‘btn3‘);
btn3.attachEvent(‘onclick‘,function(){
alert(this === window); //true
});
// 那么重点来了：与addEventListner()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序
var btn4 = document.getElementById(‘btn4‘);
btn4.attachEvent(‘onclick‘,function(){
alert(‘Clicked!‘);
});
btn4.attachEvent(‘onclick‘,function(){
alert(‘Hello World!‘)
});
// 但是，针对IE8，与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。单击这个按钮，首先会看到“Hello World!”，然后才是“Clicked!”；IE8+以上就和DOM方法执行顺序一样；
//使用attachEvent()添加的事件可以通过detachEvent()来移除，前提是参数得一致，如同DOM方法一样；
</script>
</body>
</html>
总之，像这方面的东西，还是需要自己多多测试，多多研究！推荐大家看看<JS高级程序设计>；
总之，像这方面的东西，还是需要自己多多测试，多多研究！推荐大家看看<JS高级程序设计>；
总之，像这方面的东西，还是需要自己多多测试，多多研究！推荐大家看看<JS高级程序设计>；
以上是关于JS 关于事件处理程序机制的主要内容，如果未能解决你的问题，请参考以下文章