DOM0 DOM2 addEventListener

Posted 2023-05-02

参考技术A DOM0（属性绑定，兼容性好）：将一个函数赋值给一个事件处理属性

在dom上直接绑定事件（一个事件只能绑定一次），没有事件传播（事件一旦发生就立即调用句柄执行）。缺点：一个事件处理程序只能对应一个处理函数。

监听方法：

1.在标签内写onclick事件

<input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >

alert()中的this的值会变成全局(window)对象的引用（在 严格模式 中为 undefined）。

2.在JS写onlicke=function（）函数

document.getElementById("myButton").onclick = function ()

    alert('thanks');



this的指向

用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，可以用this获取当前元素的属性。

$btn.onclick=function()alert('输出当前元素id：'this.id);

删除DOM0事件处理程序，只要将对应事件属性置为null即可：

btn.onclick = null；

DOM2：（函数绑定，兼容性不好）

采用addEventListener来注册事件，支持 事件流 的捕获过程和冒泡过程（注册事件的时候第三个参数控制）

只有一个监听方法，添加事件处理程序：addEventListener()，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

移除事件处理程序：removeEventListener()，不能移除匿名添加的函数。

它们都有三个参数：

第一个参数是事件名（如click）；

第二个参数是事件处理程序函数；

第三个参数表示 是否在捕获时执行事件处理函数 ，默认为false表示在冒泡阶段调用。

和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this保存的同样是当前元素对象的引用。

注：

a)  eventName的值均不含on，如注册鼠标点击事件eventName为click

b)  给EventListener传递一个（普通或者箭头）函数，则处理函数中的this指的是指当前dom元素；如果传递函数的引用，则this指全局对象，除非通过bind调用想要访问对应作用域对象：

element.addEventListener('click', this.onclick2.bind(this) ,false);

c)  通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现，这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡阶段触发句柄，所以attachEvent添加的事件都会被添加到冒泡阶段，并且要在事件前面加on（例如onclick）

document.getElementById("myTest").attachEvent("onclick", function()alert(1));

//等价于

document.getElementById("myTest").addEventListener("click", function()alert(1), false);

只有DOM2级包含事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

<span>

    <a></a>

</span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a->span->document 。

区别：

如果定义了两个dom0级事件，dom0级事件会覆盖；dom2不会覆盖，会依次执行

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

dom2提供了一种更精细的手段控制listener的触发阶段（即可以选择捕获或者冒泡）

DOM3事件

DOM3级事件规定了一下几种事件：

UI事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或者失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行操作时触发；

滚轮事件，当使用鼠标滚轮（或类似设备）时触发；

文本事件，当在文档中，输入文本时触发；

键盘事件，当用户通过键盘在页面上执行操作时触发；

合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；

变动事件，当底层Dom结构发生变化时触发；

DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。

DOM中的事件模拟（自定义事件）

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建自定义事件可以由createEvent("CustomEvent")

返回的对象有一个initCustomEvent（）方法接收如下四个参数

1）type：字符串，触发的事件类型，自定义，例如 “keyDown”，“selectedChange”;

2）bubble（布尔值）：标示事件是否应该冒泡；

3）cancelable(布尔值)：标示事件是否可以取消；

4）detail（对象）：任意值，保存在event对象的detail属性中；

可以像分配其他事件一样在DOM中分派创建的自定义事件对象，如：

var  div = document.getElementById("myDiv");

EventUtil.addEventHandler(div,"myEvent", function ()

    alert("div myEvent!");

);

EventUtil.addEventHandler(document,"myEvent",function()

    alert("document myEvent!");

);

if(document.implementation.hasFeature("CustomEvents","3.0"))

    var e = document.createEvent("CustomEvent");

    e.initCustomEvent("myEvent",true,false,"hello world!");

    div.dispatchEvent(e);



这个例子中创建了一个冒泡事件myEvent，event.detail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件。因为在initCustomEvent中设置了事件冒泡，所以当div激发该事件时，浏览器会将该事件冒泡到document。

写一个行内onclick，行外赋值onclick，和evenrlistener，怎么输出？

为什么一般在冒泡阶段，而不是在捕获阶段注册监听? 

事件处理

1） html事件处理： <div onclick = zdh()></div>

2)  dom0  dom元素.onclick = function zdh(){};

3)  dom2 : 3个参数

dom元素.addEventListener(事件类型 , 回调函数, true );

dom元素.addEventListener(click, zdh ,true);// 事件类型没有on  true表示事件捕获类型 false表示事件冒泡类型 

 

移除事件：

html事件处理：代码耦合性太高

dom0：  dom元素.onclick = null;

dom2：  removeEventListener(click,zdh,true);// 把移除事件写在回调函数中，可以实现只执行一次的效果。

IE事件：

dom元素.attachEvent("onclick" , zdh );//两个参数 要用onclick 而不是 click；

dom元素. detachEvent("onclick" , zdh); 

 

冒泡：

先执行“我是按钮”，在弹出“我是容器” //false;

先执行“我是容器”，在弹出“我是按钮” // true;

 

能支持所有浏览器：== 兼容dom0，dom2，IE

var EventUtil = {

　　//添加

　addEvent : function(ele,eventType,fun){

　　if( ele.addEventListener){

　　ele.addEventListener( eventType,fun,false);

}else if( ele.attachEvent){

　　ele.attachEvent( "on"+eventType,fun);

}else{

　　ele["on"+eventType] = fun ; //  原本是ele.onclick，但是需要加“on” 所以应用ele[];

}

}　,

　　//删除

deleteEvent : function(ele,eventType,fun){
    if( ele.removeEventListener){
        ele.removeEventListener( eventType,fun,false);
    }else if( ele.detachEvent()){
        ele.detachEvent( "on"+eventType,fun);
    }else{
        ele["on"+eventType] = null ;
    }
}

};

EventUtil.addEvent(div1,"click",zdh);

EventUtil.deleteEvent(div1,"click",zdh);

function zdh(){

　　alert(11111);

}

 

点击事件 事例 点击隐藏 再点击显示；

支持事件冒泡：onmouseout,onouseover,onclick,dblclick,onmousemove,onmouseup,onmousedown

阻止事件冒泡 mouseleave ,onmouseenter