module3-03-DOM事件绑定、解除、事件流
一、注册事件的方法
-
注册事件三要素：
-
事件源
-
事件类型
-
事件处理函数
-
1.1 传统on注册方式
-
如果同时定义了两次，后面的函数会把前面的函数替换掉
-
因为onclick指向的是一个指针
1.2 注册事件的其他方法1
-
element.addEvenetListener() // DOM级事件绑定方式 -
参数
-
第一个参数：事件类型的字符串（字节书写‘click’，不用加on）
-
第二个参数：事件函数（最好可以是一个已声明的函数，方便后期取消）
-
-
同一个元素可以多次绑定事件监听，同一个事件可以注册多个事件函数
-
兼容问题：不支持IE9以下的浏览器
1.3 注册事件的其他方法2
-
element.attachEvent() // DOM2级事件 -
参数
-
第一个参数：事件类型的字符串（需要加on）
-
第二个参数：事件函数
-
-
同一个元素可以多次绑定事件监听，同一个事件类型（比如相同的onclick）可以注册多个事件函数
-
兼容性问题：只支持IE10及以下的浏览器
-
IE8及以下的浏览器处理时间队列时，会出现顺序错乱
-
1.4 注册事件的兼容写法
-
自定义一个注册事件函数
-
参数：事件源，事件类型（不加on），事件函数
-
IE9及异上的浏览器，使用addEventListener方
-
IE9以下的浏览器，使用attachEvent
-
浏览器能力检测：将某个方法的调用作为if语句的判断条件，如果浏览器认识该方法则返回true，否则返回false
二、解除事件绑定
2.1 传统绑定的事件的解除方法
-
element.onclick = null
2.2 移除事件的其它方式1
-
element.removeEventListener() -
参数:
-
第一个参数：事件类型的字符串（直接书写‘click’，不需要加on）
-
第二个参数：事件函数引用名
-
注意事项
-
没有办法移除一个匿名函数，所以在注册事件需要单独声明一个有函数名的函数‘
-
兼容性问题：不支持IE9及以下的浏览器
2.3 移除事件的其它方法2
-
element.detachEvent() -
参数:
-
第一个参数：事件类型的字符串（需要加on）
-
第二个参数：事件函数
-
注意事项
-
没有办法移除一个匿名函数，需要在注册事件时需要单独声明一个有函数名的事件函数
-
兼容性问题：只支持IE10及以下的浏览器
2.4 移除事件的兼容写法
-
自定义一个移除事件函数
-
参数：事件源、事件类型（不加on）、事件函数
-
IE9及异上的浏览器，使用removeEventListener方法
-
IE9以下的浏览器，使用detachEvent方法
-
建议：将自己封装的一些常用函数和方法，放到一个单独的.js文件中
三、DOM事件流
3.1 事件流的三个阶段
-
第一个阶段：事件捕获
-
第二个阶段：事件执行过程
-
第三个阶段：事件冒泡
-
addEventListener的第三个参数为true的时候，事件在捕获中执行
-
addEventListener的第三个参数为false的时候，事件在冒泡中执行
-
onclick类型于attachEvent：只能进行事件冒泡过程，没有捕获阶段
3.2 事件冒泡应用-事件委托
-
利用事件冒泡，将子级的事件委托给父级加载
-
同时，需要利用事件函数一个e事件对象参数，内部存储的事事件对象
-
e.target即真正触发事件的那个元素
-
-
这样只需要给父元素这一个绑定事件就可以了
3.3 事件对象
-
只要触发事件，就会有一个对象，内部存储了与事件相关的数据，比如触发事件的源
-
e在低版本浏览器中有兼容问题，低版本浏览器使用的是window.event
-
事件对象常用的属性
-
e.eventPhase 查看事件触发时所处的阶段
-
1：捕获阶段
-
2：目标阶段
-
3：冒泡阶段
-
-
e.target 用于获取触发事件的元素
-
e.srcElement 用于获取触发事件的元素，低版本浏览器使用
-
e.currentTarget 用于获取绑定事件的事件源元素（即绑定事件函数的元素）
-
e.type 获取事件类型
-
优化方案：可以让不同事件类型绑定同一个函数，然后根据传入参数
e.type来决定调用什么代码
-
-
e.clientX/e.clientY 鼠标距离浏览器窗口左上角的距离（所有浏览器都支持）
-
e.pageX/e.pageY 数据距离整个HTML页面坐上顶点的距离，包括滚动的高度（IE8以前不支持）
-
-
兼容性写法
-
e = e || window.event
var target = e.target || e.srcElement
-
3.4 取消默认行为和阻止冒泡
-
有时候冒泡行为跟默认行为并不是我们所期待的，所以使用事件对象e可以有方法阻止他们
-
e.preventDefault()-
取消默认行为
-
-
e.returnValue = false-
取消默认行为，低版本浏览器使用
-
-
e.stopPropagation()-
阻止冒泡，标准方式
-
-
e.cancelBubble = true-
阻止冒泡，IE低版本，标准中已废弃
-
兼容写法
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
e.stoPropagation ? e.stopPropagation() : (e.cancelBubble = true)
