追梦人hqh

博客园 首页 联系 订阅 管理

关于这个问题,自己也做了一下测试,算了,直接粘贴代码吧,若有问题,欢迎指出!

<!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高级程序设计>;






posted on 2016-05-18 11:04  追梦人hqh  阅读(230)  评论(0编辑  收藏  举报