DOM事件绑定---DOM0与DOM2

一、DOM0级事件

1.所有的浏览器都支持

2.事件只能注册一次，后边的会覆盖旧的

3.注册

（1）在html上添加：<div οnclick="alert('hello')"></div> this指向自身

（2）匿名函数：d.onclick = function(){} ； this指向自身

（3）普通函数：οnclick="ok()"；

相当于动态调用

this指向自身

没有事件参数e的传递

二、DOM2级事件（事件监听）

1.IE浏览器

（1）attachEvent(event,function) event要加on

（2）detachEvent(event,function)

2.非IE浏览器

（1）addEventListener(event,fuction,userCapture)

 addEventListener("事件名" , "事件处理函数" , "布尔值");

event 不能加句柄on

user Capture 指定捕获还是冒泡（true 捕获 false冒泡）

（2）removeEventListener（event，fuction）

 addEventListener("事件名" , "事件处理函数" );

三、DOM0与DOM2的区别

DOM0级事件同一事件只能执行一次，而DOM2级事件同一事件可监听多次

四、事件监听

1. addEventListener()添加事件监听
   使用 addEventListener()方法用于向指定元素添加事件句柄。
   addEventListener("事件名" , "事件处理函数" , "布尔值");

（1）参数event必填，表示监听的事件，例如 click, resize等，不加前缀on的事件。
（2）参数 function必填，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。不带参数。
（3）参数 useCapture选填，填true或者false，用于描述事件是冒泡还是捕获触发，true表示捕获，默认false表示冒泡。
2. removeEventListener()移除事件监听
（1）使用 removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。

（2）如果function参数传的是匿名函数,没办法用removeEventListener来移除监听。

3.事件的获取：

事件冒泡：事件由子级传向父级

事件捕获：事件由父级传向子级

 浏览器默认都是冒泡的执行方式

​ 通过 addEventListener 第三个参数来设定获取方式

​ 默认值 false 是 冒泡      true是捕获

​ 一般实际项目中,不定义第三个参数,就使用默认方式，​ 低版本IE,只支持冒泡,不支持捕获,不会报错,只会按照冒泡的顺序执行