事件监听-事件代理

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
Dom0中的事件处理函数
DOM0中通过on开头加上事件，click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload
后添加的事件处理程序会覆盖掉之前添加的处理程序，只能有一个是有效的；DOM0级以属性赋值的方式绑定事件程序；

html中绑定事件

image.png

对应的程序

image.png

//还有方法，获取对应的DOM，绑定属性值

image.png image.png

取消事件
DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序，将相应属性值设置为null即可。

image.png

缺点:1.HTML与JavaScript代码紧密耦合，对代码修改和维护都造成了不便。2.如果一个事件绑定多个程序，后面的程序会覆盖前面的程序
DOM2的事件监听
DOM2中通过addEventListener()添加事件监听，通过removeEventListener()来移除事件监听

image.png

实现了js和html分离，也可以绑定多个元素

image.png

attachEvent与addEventListener的区别？
1.低版本的IE不支持addEventListener()事件监听，它通过attachEvent()来实现事件的监听

2.参数的区别 addEventListener()接受三个参数（事件类型，事件方法，布尔值{如果是true则是在捕获阶段调用事件方法，如果是false则是在事件冒泡阶段处理}），attachEvent()接受二个参数（事件类型，事件方法）
第一个参数的值不同 addEventListener()的第一个值参数是事件类型（click,load）,attachEvent()则是事件处理函数名称（onclick,onload）
3.事件处理程序的作用域的不同 addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行,所以this是window
4.为一个事件添加多个事件处理程序时，执行顺序不同 addEventListener会从上到下的依次执行，而attachEvent当事件监听多的时候，是没有规律的执行

浏览器支持情况

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/attachEvent

image.png