DOM-事件高级

一、事件对象

含有事件触发的相关信息的对象就是事件对象。

1.1 获取事件对象

在事件绑定的回调函数里添加一个形参，一般命名为event、ev、e。

<script>
    // e就是事件对象
    事件源.addEventListener('事件',事件处理函数(e){})
</script>

1.2 事件对象常用属性

• e.type ： 获取当前的事件类型；
• e.clientX/clientY ：获取光标相对于浏览器可见窗口左上角的位置；
• e.offsetX/offsetY ：获取光标相对于当前DOM元素左上角的位置；
• e.key ：获取用户按下的键盘键的值；

例：

<textarea name="txt" id="" cols="30" rows="10"></textarea>
<script> 
    // 按下键盘事件 keydown/keyup
    document.addEventListener('keydown', function (e) {           
        //获取键值
        console.log(e.key)
    })
</script>

• e.pageX/pageY ： 获取光标相对于整个文档页面左上角的位置，常用。

例：

<!-- 让图片跟随鼠标移动 -->
<!-- 图片一定要加定位 -->
<img src="./images/tianshi.gif" alt="">

<script>
    // 获取事件 
    let pic = document.querySelector('img')

    // 注册事件 mousemove:鼠标移动事件
    document.addEventListener('mousemove', function (e) {
        // 要获得鼠标坐标属性一定要定义事件对象 e 
        // 将得到当前鼠标坐标 e.pageX / e.pageX 给图片
        // console.log(typeof e.pageX) 返回的是数字型 CSS一定要记得加上单位
        pic.style.left = e.pageX + 'px'
        pic.style.top = e.pageY + 'px'
    })
</script>

---

二、事件流

2.1 事件流与两个阶段

• 事件流指的是事件完整执行过程中的流动路径：事件捕获 -> 事件目标阶段 -> 事件冒泡；
• 当触发事件时，会经历两个阶段，分别是捕获阶段和冒泡阶段；

2.2 事件捕获和事件冒泡

2.2.1 事件捕获

• 从DOM的根元素开始去执行对应的事件 (从外到里)；
• 事件捕获必须使用事件监听的形式注册:

语法：

DOM.addEventListener(事件，事件处理函数，是否使用捕获机制 true/false)

• 说明：
  – 第三个参数传入true代表是捕获阶段触发（很少使用）；
  – 若传入false代表冒泡阶段触发，默认就是false；
  – 传统注册L0，则只有冒泡阶段，没有捕获。

2.2.2 事件冒泡

• 当一个元素触发事件后，会依次向上调用所有父级元素的同名事件。这一过程被称为事件冒泡。
• 事件冒泡是默认存在的。

2.3 阻值事件流动

因为事件冒泡是默认存在的，所以容易导致当前事件影响到父级元素；需要把事件就限制在当前元素内。

2.3.1 e.stopPropagation()

阻值事件冒泡

事件对象.stopPropagation()

• 此方法不仅在冒泡阶段有效，捕获阶段也有效；

2.3.2 e.preventDefault()

阻止默认事件发生：如链接的跳转、表单的提交；

// 语法
// 事件对象.preventDefault()
<!-- 点击链接，阻止跳转 -->
	<a href="http://www.baidu.com">百度一下</a>
<script>
    let a = document.querySelector('a')
    a.addEventListener('click', function (e) {
        e.preventDefault()
    })
</script>

2.3.3 鼠标经过事件

• mouseover 和 mouseout 有冒泡效果；
• mouseenter 和 mouseleave 没有冒泡效果(推荐)。

2.4 注册事件L0与L2的区别（了解）

• 传统on注册（L0）

1. 同一个对象,后面注册的事件会覆盖前面注册的同一个事件；
2. 使用null实现事件的解绑：事件源.on事件=null；
3. 只有冒泡阶段。

• 事件监听注册（L2）

1. 语法: addEventListener(事件, 事件处理函数, 捕获（true）/ 冒泡（false）)；
2. 后面注册的事件不会覆盖前面注册的同一个事件；
3. 可以通过第三个参数去确定是在冒泡或者捕获阶段执行；
4. 事件解绑必须使用removeEventListener(事件, 事件处理函数，true/false（可写可不写）)；
5. 匿名函数无法被解绑。

---

三、事件委托和解绑事件

3.1 事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧：

• 优点：减少事件的注册，提高性能；
• 原理：利用事件冒泡的特点， 给父元素添加事件，子元素可以触发；
• 实现：事件对象.target 获取真正触发事件的元素。

例：

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

<script>
    // 事件委托是给父级元素添加事件
    let ul = document.querySelector('ul')

    ul.addEventListener('click', function (e) {
        // 得到当前元素
        console.log(e.target)
        e.target.style.color = 'green'
	})
</script>

3.2 解绑事件

• 传统注册事件

// 解绑事件
事件源.on事件名 = null

• 事件监听注册事件

// 解绑事件
removeEventListener(事件名, 事件处理函数, [获取捕获或者冒泡阶段])

匿名函数无法解绑