DOM0级和DOM2级在绑定事件上的区别
一、dom0级
1、绑定方式(用html的方式绑定)
使用html属性的方式绑定,如果要调用这个函数,这个函数在js中就要处于全局作用域
<input type="button" id = "button1" value="按钮" οnclick="queren(this)">
function queren(data) {
alert(data.value)
}
(用匿名函数的方式绑定)
var btn1=document.getElementById(" button1 ");
btn1.onclick = function () {
alert(this.value);
}
注:dom0级只能绑定一个函数(后绑定的函数会覆盖前面绑定的函数)
2、所有的dom0级事件都有“on”作为开头
3、dom0级的根本是绑定事件
4、dom0级只支持冒泡不支持捕获
阻止冒泡:
event.stopPropagation;
5、dom0级删除事件绑定设置为空或者null
例:obj.onclick = function(){};
取消就是:obj.onclick = null;
二、dom2级
1、可以绑定多个函数
实现方式:(事件监听器)addEventListener(event,function,isBubbles);//为函数绑定事件
removeEventListener(event,function,isBubbles);//移出事件处理程序(用处理程序名删除)
注:匿名添加的事件处理程序无法移除
2、事件名前面没有“on”
3、既支持冒泡又支持捕获
阻止冒泡的实现方式:
event.stopProagation;
附:IE的特殊处理方式
1、事件名以“on”开头
2、只支持冒泡,不支持捕获
阻止冒泡的实现方式:
event.cancelBubble = true;
3、支持多处理程序的注册,但是执行顺序与注册顺序相反
4、删除事件处理函数的方式和DOM2级的方式相同
event对象:
event对象只在事件发生的过程中才有效event对象是自带的对象,是固定的写法
event对象的兼容性写法:
evt = event || window.event;
附(event对象的常见的属性和方法)
附(常见的dom0级事件)