DOM高级事件——pink老师笔记

前言

1、能够写出元素注册事件的两种方式
2、能够说出删除事件的两种方式
3、能够说出DOM事件流的三个阶段
4、能够利用时间对象完成跟随鼠标案例
5、能够封装阻止冒泡的兼容性函数
6、能够说出事件委托的原理
7、能够说出常用的鼠标和键盘事件

1. 元素注册事件

1.1 注册事件概述（绑定事件）
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

传统注注册方式
1、利用on开头的事件onclick
2、<button οnclick=“alert(“hi~”)”>
btn.onclick = function(){}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数

方法监听注册方式
w3c标准，推荐方式
addEventListener()它是一个方式
IE9之前的IE不支持此方法，可使用attachEvent（）代替
特点：同一个元素同一个事件可以注册多个监听器

1.2 addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接受三个参数：
type：事件类型字符串，比如click，mouseover,注意这里不要带on
listener:事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，我们再进一步学习

attachEvent 非标准 不要在生产环境使用
eventTarget.attachEvent(eventNameWithOn,callback)
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接受两个参数：
eventnameWithOn:事件类型字符串，比如onclick,onmouseover,这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用。

注册事件兼容性解决方案
function addEventListener(element,eventName,fn){
//判断当前游览器是否支持addEventListener方法
if(element.addEventListener){
element.addEventListener(eventName fn); // 第三个参数，默认是false
}else if (element.attachEvent){
element.attachEvent(‘on’+eventName,fn)
}else{
// 相当于 element.onclick = fn
element[‘on’+eventName] = fn;
}
}
兼容性处理原则：首先照顾大多数游览器，再处理特殊游览器

2. 删除事件（解绑事件）

2.1 删除事件的方式
1.传统注册方式
eventTarget.onclick = null
2.2 方法监听注册方式
eventTarget.removeEventListener(type,listener[,useCapture])
eventTarget.detachEvent(eventNameWithOn,callback)

---

3. DOM事件流

事件流描述的是从页面中接受事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段
1、捕获阶段
2、当前目标阶段
3、冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受过程。

1、JS代码中只能执行捕获或者冒泡其中的一个阶段
2、onclick和attachEvent只能得到冒泡阶段
3、addEventListener（type，listener[,useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序，如果是false（不写默认就是false）表示在事件冒泡阶段调用事件处理程序。
4、实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5、有些事件是没有冒泡的，比如onblur,onfocus,onmouseenter,onmouseleave
6、事件冒泡有时候会带来麻烦，有时候会帮助很巧妙地做某些事情。

// dom事件流 三个阶段
        // JS代码中执行捕获或者冒泡其中的一个阶段
        // onclicj和attachEvent（ie）只能得到冒泡阶段
        // 捕获阶段 如果addEventListener第三个参数时true那么则处于捕获阶段 document -> html -> body -> father -> son
        var son = document.querySelector('.son')
        son.addEventListener('click',function(){
            alert('son')
        },true)
        var father = document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('father')
        },true)
        // 冒泡阶段 如果addEventListener 第三个参数时false或者省略，那么则处于冒泡阶段 son -> father -> body -> html -> document
        var son = document.querySelector('.son')
        son.addEventListener('click',function(){
            alert('son')
        },false)
        var father = document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('father')
        },false)