JS中DOM0级和DOM2级以及IE的区别

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级事件）