DOM0级事件处理与DOM2级事件处理的区别

DOM是分等级的,分别是DOM0,1,2,3级别越高,语句越高级。

一、DOM0级事件处理

DOM0级事件处理方式就是讲一个函数赋值给一个事件处理属性,如:

box.onclick = function(){
	alert("我是box");
}

就是把函数赋值给了box的onclick属性,当然每个元素都有自己处理程序的属性,例如:onmousedown、onmouseup等,

on**这种事件绑定方法属于DOM0级事件绑定。

DOM0级事件有什么特点:

1.DOM0级事件只能触发事件冒泡阶段不能触发事件捕获阶段。
box2.onclick = function(){
	alert("我是box2");
}
box3.onclick = function(){
	alert("我是box3");
}
box1.onclick = function(){
	alert("我是box1");
}

  不管我们怎么改变事件的绑定顺序,不影响我的弹出框。box3然后box2最后box1。为什么?因为onclick只能触发事件冒泡不能触发事件捕获。因为事件冒泡是从事件流的最内层的元素依次往外层传播。

2.同一元素绑定相同的事件,后面的会覆盖前面的。
box3.onclick = function(){
	alert("A");
}
box3.onclick = function(){
	alert("B");
}
box3.onclick = function(){
	alert("C");
}

点击box3只会弹出C。因为on**方法相当于给元素添加属性。后面写的会覆盖先写的。

多说一点:还可以通过行内式给元素绑定事件。

3.this指的是事件流传播到的这个元素,就元素本身。

二、DOM2级事件处理

DOM2绑定事件的方法addEeventListener();

DOM2删除事件的方法removeEeventListener();

addEventListener(事件名事件执行语句,布尔值)

事件名:click不用书写on,只需要书写click

事件执行语句:就是函数,可以是匿名函数,也是有名函数。

布尔值:true表示事件捕获false表示事件冒泡。

DOM2级事件绑定的特点:

1、对于精确的元素不区分事件捕获和事件冒泡,事件的执行顺序是按照绑定顺序来的。

2、同一个元素绑定相同的事件,后面的不会覆盖前面的。因为DOM2级事件绑定不是给元素添加属性是直接添加的事件。等同于给一个元素绑定了多个事件。

box2.addEventListener("click",function(){
	console.log("c");
},false);
box2.addEventListener("click",function(){
	console.log("D");
},false);
box2.addEventListener("click",function(){
	console.log("E");
},false);

以上“c”、“D”、“E”都会输出。

另外,在DOM2级事件处理中通过addEventListener()添加的匿名函数无法移除,要先给函数命名:

 function handler(){
        console.log("可以移除的函数");
    }
    btn.addEventListener('click',handler, false);
    btn.removeEventListener('click',handler,false);















阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页