JS笔记8

事件的传播

• 我们如果在浏览器内用一个宽高500px的父盒子, 内部有一个水平垂直都居中的宽高100px的子盒子, 并且这两个盒子都设置上点击事件
• 那么我们如果点击在子盒子身上, 其实也是点击在了父盒子身上
• 这就是 事件传播
  • 当元素触发一个事件的时候, 其父元素也会触发相同的事件, 父元素的父元素也会触发相同的事件
  • 点击子盒子, 会触发子盒子的点击事件
  • 也是点击在了父盒子上, 也会触发父盒子的点击事件
  • 也是点击在了 body 上, 也会触发 body 的点击事件
  • 也是点击在了 html 上, 也会触发 html 的点击事件
  • 也是点击在了 document 上, 也会触发 document 的点击事件
  • 也是点击在了 window 上, 也会触发 window 的点击事件
  • 也就是说, 页面上任何一个元素触发事件, 都会一层一层的最终导致 window 的相同事件触发, 前提是各层级元素得注册有相同的事件, 不然不会触发
• 在事件的传播过程中, 有一些注意的点
  1. 只会传播同类事件
  2. 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
  3. 内部元素不管有没有该事件, 只要上层元素有该事件, 那么上层元素的事件就会被触发
• 这就是事件传播, 我们思考一个问题
  • 事件确实会从自己开始, 到 window 的所有相同事件都会触发
  • 是因为我们点在自己身上, 也确实逐层的点在了直至 window 的每一个元素身上
  • 但是我们到底是先点在了自己身上, 还是先点在了 window 身上
    • 先点在自己身上, 就是先执行自己的事件处理函数, 逐层向上最后执行 window 的事件处理函数
    • 反之, 则是先执行 window 的事件处理函数, 逐层向下最后执行自己身上的事件处理函数

冒泡; 捕获; 目标

目标

• 你点击在那个元素身上了, 那么这个事件的 目标 就是什么

冒泡

• 就是从 目标 的事件处理函数开始, 依次向外, 直到 window 的事件处理函数触发
• 也就是从下向上的执行事件处理函数

捕获

• 就是从 window 的事件处理函数开始, 依次向内, 直到事件 目标 的事件处理函数执行
• 也就是从上向下的执行事件处理函数

冒泡与捕获的区别

• 就是在事件的传播中, 多个同类型事件处理函数的执行顺序不同

事件委托

• 就是把我要做的事情委托给别人来做
• 因为我们的冒泡机制, 点击子元素的时候, 也会同步触发父元素的相同事件
• 所以我们可以把子元素的事件委托给父元素来做

事件触发

• 点击子元素的时候, 不管子元素有没有点击事件, 只要父元素有点击事件, 那么就可以触发父元素的点击事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var oUl = document.querySelector('ul')

oUl.addEventListener('click', function (e) {
    console.log('我是 UL 的点击事件, 我被触发了')
})

• 上述代码, 我们点击 UL 的时候肯定会触发
• 但是点击 li 的时候, 其实也会触发

target

• target 这个属性是事件对象里的属性, 表示你点击的目标
• 当你触发点击事件的时候, 你点击在那个元素上, target 就是那个元素
• 这个 target 也不兼容, 在 IE 下要使用 srcElement

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var oUl = document.querySelector('ul')

oUl.addEventListener('click', function (e) {
    e = e || window.event
    var target = e.target || e.srcElement
    console.log(target)
})

• 上述代码, 点击 ul 的时候, target 就是 ul
• 点击在 li 上面的时候, target 就是 li

委托

• 这个时候, 当我们点击 li 的时候, 也可以触发 ul 的点击事件
• 并且在事件内部, 我们可以拿到点击的到底是 ul 还是 li
• 这个时候我们可以把 li 的事件委托给 ul 来做

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var oUl = document.querySelector('ul')

oUl.addEventListener('click', function (e) {
    e = e || window.event
    var target = e.target || e.srcElement
    
    if (target.nodeName.toUpperCase === 'LI') {
        console.log('我是 li, 我被点击了')
    }
})

总结

• 为什么要使用事件委托
  • 页面上本身没有 li, 通过代码添加了一些 li
  • 这些 li 是没有点击事件的, 每次动态的操作完 li 以后都要从新给 li 绑定一次点击事件, 特别麻烦
  • 这时候只要委托给 ul 就可以了
  • 因为新加进来的 li 也是 ul 的子元素, 点击的时候也可以触发 ul 的点击事件
• 事件委托的书写
  • 元素的事件只能委托给结构父级或者再结构父级的同样的事件上
  • li 的点击事件, 就不能委托给 ul 的鼠标移入事件
  • li 的点击事件, 只能委托给 ul 或者在高父级的点击事件上

默认行为

• 默认行为: 不用我们注册, 但自己存在的事情
  • 鼠标右键弹出一个菜单
  • 点击 a 标签后, 自己会跳转页面
• 这些不需要我们注册就能实现的事情, 我们叫做 默认事件

阻止默认行为

• 不希望浏览器执行默认事件时, 比如点击 a 标签不跳转页面, 那么就需要阻止默认事件
• 两个方式
  • e.preventDefault(): 非 IE 使用
  • e.returnValue = false: IE 使用

<a href="https://www.baidu.com">点击我试试</a>

var oA = document.querySelector('a')
a.addEventListener('click', function (e) {
    e = e || window.event
    console.log(this.href)
    e.preventDefault ? e.preventDefault() : e.returnValue = false
})