事件监听事件代理
2017-03-16 本文已影响0人
饥人谷_小霾
DOM0 事件和DOM2级在事件监听使用方式上有什么区别?
Dom0中的事件处理函数
DOM0中通过on
开头加上事件,click
事件的事件处理程序就是onclick
,load
事件的事件处理程序就是onload
后添加的事件处理程序会覆盖掉之前添加的处理程序,只能有一个是有效的;DOM0级以属性赋值的方式绑定事件程序;
- html中绑定事件
<input id='myBtn' type="button" value="这是个按钮 "onclick="showMessage()" />
- 对应的程序
function showMessage(){
console.log(this.id);
}
//还有一种方法,获取对应的DOM,绑定属性值
var btn=document.getElementById("myBtn");
btn.onclick=function(){
console.log(this.id);
}
- 取消事件
DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序,将相应属性值设置为null即可。
btn.onclick=null;
缺点:1.HTML与JavaScript代码紧密耦合,对代码修改和维护都造成了不便。2.如果一个事件绑定多个程序,后面的程序会覆盖前面的程序
DOM2的事件监听
DOM2中通过addEventListener()
添加事件监听,通过removeEventListener()
来移除事件监听
var btn=document.quertSelector(".mybtn")
btn.addEventListener('click',showMessage,false)
btn.removeEventListener('click',showMessage,false)
实现了js和html分离,也可以绑定多个元素
btn.addEventListener('click',showMessage,false)
btn.addEventListener('click',showMessage2,false)
btn.addEventListener('click',showMessage3,false)
attachEvent与addEventListener的区别?
低版本的IE不支持addEventListener()
事件监听,它通过attachEvent()
来实现事件的监听
-
参数的区别
addEventListener()
接受三个参数(事件类型,事件方法,布尔值{如果是true则是在捕获阶段调用事件方法,如果是false则是在事件冒泡阶段处理}),attachEvent()
接受二个参数(事件类型,事件方法) -
第一个参数的值不同
addEventListener()
的第一个值参数是事件类型(click,load),attachEvent()
则是事件处理函数名称(onclick,onload) -
事件处理程序的作用域的不同
addEventListener
的作用域是元素本身,this是指的触发元素,而attachEvent
事件处理程序会在全局变量内运行,所以this是window -
为一个事件添加多个事件处理程序时,执行顺序不同
addEventListener
会从上到下的依次执行,而attachEvent
当事件监听多的时候,是没有规律的执行