DOM0DOM2级事件

Posted 2020-09-03 落花有情随流水，流水无情怨落花

javascript DOM0、DOM2级事件

1、DOM0级事件：on+事件类型

在html行内直接绑定，也就是通过行内js绑定的
例如
<span onclick="alert(‘1‘)">第一项</span>

在js中绑定例如：
//<span onclick="alert(‘2‘)">第一项</span>

var Ospan=document.getElementsByTagName(‘span‘)[0];
Ospan.onclick=function(){
    alert(‘1‘);
}
这样就是DOM0级事件，最明显的缺陷的地方就是，一个元素绑定相同的事件会被后者覆盖掉
如果接触事件那么就是

Ospan.onclick=null;

2、DOM2级事件：

addEventListener(events,handler,boolean)，

removeEventListener（events,handler）

2.1、参数events是以空格间隔的事件类型，handler是事件处理程序，boolean表示是冒泡还
是捕获，true表示捕获，flase表冒泡，默认冒泡。
冒泡是从点击的元素开始，一直向上扩散事件，类似水中的气泡，从水中一直向上走，，最后到了document；
捕获是从点击的元素一直向里查找，找到该元素的包含最深的元素

DOM2级绑定事件不会覆盖自身，和DOM0级也能共存；

var Ospan=document.getElementsByTagName(‘span‘)[0];
Ospan.onclick=function(){
    alert(‘1‘);
}
Ospan.addEventListener(‘click‘,function(){
    alert(‘5‘)
},false);
Ospan.addEventListener(‘click‘,function(){
    alert(‘6‘)
},false)
以上会依次输出：1,5,6

DOM2事件可以给未被创建的元素绑定事件，但是DOMO级事件却不行，是能给已经创建的DOM元素绑定事件

3、解绑事件：

3.1、DOM0级事件是将onclick属性指向一个函数，所以只需要修改onclick属性指向null即可

3.2、DOM2级事件是为对象添加了监听某种事件的监听器，解绑的时候由removeEventListener
需要指定事件的类型，和事件处理程序的名字，因此这个方法无法解绑匿名事件处理函数的事
件。因为具体指定了事件和事件处理函数，所以同个事件类型的不同事件处理程序不相互影响。

这样不能解除事件，

Ospan.removeEventListener
(‘click‘,function(){
    alert(‘6‘)
})

这样才能解除事件，

Ospan.addEventListener(‘click‘,cc,false);
Ospan.removeEventListener
(‘click‘,cc);
function cc(){
    alert(‘6‘)
};