none

0%

事件冒泡与事件捕获&addEventListener

发表于

事件冒泡与事件捕获

事件冒泡

  • 指的是一个事件（这里假设为 click）由子元素触发时，会先调用子元素的 click 事件处理程序（如果有设置并且没有手动取消冒泡stopPropagation()），然后再调用父元素的事件处理程序（如果有设置并且没有手动取消冒泡stopPropagation()）..再继续向上传播给其直接父元素，直至根元素
  • 这个从内部向外的过程就叫事件冒泡

事件捕获

  • 事件捕获与事件冒泡的过程完全相反，是一种自顶向下的方式。
  • IE8 及以前只支持事件捕获
  • IE9+支持事件冒泡

addEventListener

  • addEventListener用来绑定事件的函数，可以传递 3 个参数
  • IE8 及以前使用 attachEvent
  • element.addEventListener(event, function, useCapture);
  • 第一个参数 event: 事件名称
  • 第二个参数 function:对应事件的处理程序
  • 第三个参数
    • 可以是一个对象，也可以是一个 Boolean
    • Boolean
      • 默认 false 表示在冒泡阶段调用事件处理程序
      • true 表示在捕获阶段调用事件处理程序
    • 对象（IE 只支持 Boolean 值，传递一个对象会隐示转换为 Boolean）
      • capture 一个 Boolean 值，默认 false,表示在冒泡阶段调用事件处理程序
      • once 一个 Boolean 值，默认 false,表示是否只执行一次
      • passive 一个 Boolean 值，默认 false,表示是否永远不会调用 preventDefault()

事件处理函数

  • 执行对应事件处理函数时，会传入一个 event 对象。event 对象其中两个属性target,currentTarget 分别表示事件的触发元素，和当前事件处理函数的正在处理事件的那个元素。
  • 例：父子元素都监听了 click 事件，当点击子元素时，当由子元素在执行相应的 click 处理函数时，此时的target 和currentTarget 都为子元素，当由父元素在执行相应的 click 处理函数时，此时的target 为子元素和currentTarget 都为父元素

一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
  .box {
    width: 500px;
    height: 500px;
    background-color: #000;
  }
  .r {
    width: 400px;
    height: 400px;
    background-color: red;
  }
  .g {
    width: 300px;
    height: 300px;
    background-color: green;
  }
  .b {
    width: 200px;
    height: 200px;
    background-color: blue;
  }
</style>
<div class="box">
  <div class="r">
    <div class="g">
      <div class="b"></div>
    </div>
  </div>
</div>
<script>
  const qs = (e) => document.querySelector(e)
  const box = qs('.box')
  const r = qs('.r')
  const g = qs('.g')
  const b = qs('.b')

  const op = {
    capture: false,
    once: false,
    passive: false,
  }
  function bindClick(e) {
    const _this = e
    e.addEventListener(
      'click',
      function (event) {
        console.log(_this.getAttribute('class'))
      },
      op
    )
  }

  bindClick(box)
  bindClick(r)
  bindClick(g)
  bindClick(b)

  /*
当capture为false时（默认）点击最内部的div时
控制台输出
b
g
r
box


当capture为true时（默认）点击最内部的div时
控制台输出
box
r
g
b

*/
</script>