js：事件的绑定方式：监听式，事件捕获、网页拖拽，事件委托，逻辑短路 - 带十三天

# 一、复习

1、事件源：绑定事件的元素

2、事件目标：触发事件的元素

3、事件类型：

4、事件的绑定

    - 赋值式：事件源.on事件类型=事件处理函数

    - 监听式

5、事件处理函数

6、事件对象：用来记录事件发生时产生的相关信息

    - 鼠标坐标

    - 键盘的键码

    - 事件目标

    - 阻止默认

    - 阻止冒泡

7. 获取事件对象

    - 参数

    - 通过window.event

8. 鼠标事件对象常用属性

    - 相对于事件目标：e.offsetX/Y

    - 相对于浏览器可视区域：e.clientX/Y

    - 相对于页面：e.pageX/Y

    - 相对于显示器屏幕：e.screenX/Y

    - 事件目标：e.target和e.srcElement

    - 按键：e.button和e.buttons

9. 键盘事件对象常用属性

    - 键码：e.keyCode和e.which

        - 常用键码：...

    - ctrl键：e.ctrlKey

    - shift键：e.shiftKey

    - alt键：e.altKey

    - 系统键：e.metaKey

10. 默认事件

    - 非主动添加，默认就存在的行为

    - 阻止默认：

        - IE低版本：e.retirnValue = false

        - 正常：e.preventDefault()

11. 事件流

    - 具有包含关系的多个事件源之间的相同事件

    - 状态：

        - 事件捕获：从外向内

        - 目标阶段：当前

        - 事件冒泡：从内向外

12. 事件冒泡

    - 事件触发时，会依次向上触发所有父元素的相同事件（从内向外）

    - 浏览器的默认事件流

    - 阻止冒泡

        - IE低版本：e.cancelBubble = true

        - 正常：e.stopPropagation()

# 三、事件的绑定方式

1、赋值式（DOM 0级）

    - 添加：赋值

    - 删除：覆盖

2、监听式（DOM 2级）

    - 添加：

       - 正常：事件源.addEventListener("事件类型", 事件处理函数, 布尔)

        - IE低版本：事件源.attachEvent("on事件类型", 事件处理函数)

            - 没有第三个参数，只能冒泡，不能捕获

    - 删除：

        - 正常：事件源.removeEventListener("事件类型", 参数2, 布尔)

            - 参数2：绑定时的事件处理函数的唯一标志

        - IE低版本：事件源.detachEvent("on事件类型", 参数2)

            - 参数2：绑定时的事件处理函数的唯一标志

3、区别:

    - 赋值式重复绑定会覆盖

    - 监听式可以重复绑定，都存在

4、监听式的兼容

4. 监听式绑定或删除事件的兼容处理

    ```js

    // 监听式事件绑定的兼容封装

    function addEvent(ele, type, cb){

        if(ele.attachEvent){

            ele.attachEvent("on"+type, cb);

        }else{

            ele.addEventListener(type, cb);

        }

    }

    // 监听式事件删除的兼容封装

    function removeEvent(ele, type, cb){

        if(ele.detachEvent){

            ele.detachEvent("on"+type, cb);

        }else{

            ele.removeEventListener(type, cb);

        }

    }

    ```

 

# 四、事件流 - 事件捕获

1、事件捕获：当需要触发某个元素事件时，先从最顶层父元素开始依次向内触发相同事件，直到触发到目标元素的事件过程

2、IE低版本

3、事件监听式你绑定事件的第三个参数，用来控制事件流的状态是捕获还是冒泡

        - ele. addEventListener（'事件类型'，事件处理函数，参数3）

        - 参数3：布尔值(ture:捕获，false冒泡)

# 五、事件应用 - 网页拖拽

1、拖拽过程

    - 按下

    - 移动

    - 抬起

# 六、事件的委托

1、将多个子元素的相同事件委托给页面现存的共同的父元素，利用事件冒泡配合事件目标找到真正触发事件的元素，过程，叫事件委托

2、节省内存空间、可以给页面上暂时不存在的元素绑定事件

# 七、逻辑短路

1、 `||`：从左向右检测，遇到true值，停止，并得到该值，遇到false值，返回后一个值

2、 `&&`：从左向右检测，遇到false值，停止，并得到该值，遇到true值，返回后一个值

 

# 八、监听式绑定事件原理

1、自定义封装功能，实现监听式绑定事件