1. 事件的目标

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

2. 事件的冒泡与捕获

• 冒泡:就是从 目标 的事件处理函数开始,依次向上,一直到 window 的事件处理函数触发; 也就是说从下向上的执行 事件处理函数
• 捕获:就是从 window 的事件处理函数开始,依次向下,一直到 目标 的事件处理函数触发; 也就是说从上向下的执行 事件处理函数
• 区别:就是在事件的传播中,多个同类型的事件处理函数的执行顺序不同,仅此而已

<style>
    .box{
      width: 500px;
      height: 500px;
      background-color: pink;
    }
    .sBox{
      width: 100px;
      height: 100px;
      background-color: aqua;
      margin: auto;
    }
</style>

<div class="box">
    <div class="sBox"></div>
</div>

    //0.获取元素
    var sBox = document.querySelector('.sBox')
    var box = document.querySelector('.box')
    var oBody = document.body

    //1.按照事件冒泡的形式传播
    sBox.onclick = function(){
      console.log('我是内层 DIV,我的点击事件被触发了')
    }
    box.onclick = function(){
      console.log('我是外层 DIV,我的点击事件被触发了')
    }
    oBody.onclick = function(){
      console.log('我是 body,我的点击事件被触发了')
    }

    /**
     * 2.按照事件捕获的形式传播
     *    addEventListener 第三个参数就是决定当前传播方式为 捕获还是冒泡
     *    默认第三个参数为 false,代表传播方式为冒泡 
     *    如果想按照捕获的形式传播,那么给第三个参数传递一个 true
    */

    sBox.addEventListener('click',function(){
      console.log('我是内层 DIV,我的点击事件被触发了')
    },true)
    box.addEventListener('click',function(){
      console.log('我是外层 DIV,我的点击事件被触发了')
    },true)
    oBody.addEventListener('click',function(){
      console.log('我是 body,我的点击事件被触发了')
    },true)

3.事件委托

• 就是要把我自己要做的事,委托给别人帮我完成
• 因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件,所以我们可以把子元素的事件委托给父元素来做
• 点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件

3.1 target

• 这个属性是事件对象里的属性,表示你点击的目标
• 事件委托的优点
  • 如果页面上本身没有 li ,通过代码添加了一些li
  • 这些 li 是没有点击事件的,每次动态的添加 li,还需要重新给 li 绑定一次点击事件
  • 这时候使用事件委托就比较合适
  • 因为新加进来的 li 也是 ul 的子元素,点击的时候也可以触发 ul 的点击事件

4.默认行为

• 不用我们注册,但是自己存在的事情
  • 比如: 鼠标单击右键会弹出一个菜单
  • 点击 a 标签后,自己会跳转到页面
• 这些不需要我们注册就能实现的事情,我们叫做 默认事件
• 阻止默认事件:不希望浏览器执行默认事件时,比如 点击 a 标签不跳转页面,那么就需要阻止默认事件
  • 两种方式:
    1. a.preventDefault() -> 非 IE 浏览器
    2. a.returnValue = false -> IE 浏览器(了解即可)