语言►JavaScript

JavaScript中的自定义事件

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/24/JavaScript%E4%B8%AD%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/

摘要

本文主要讲述了：

  1. 创建自定义事件

正文

创建自定义事件

示例：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">
      <p id="bar">hello, world</p>
    </div>
    <script>
      // 创建自定义事件，不允许冒泡
      const helloEvent = new Event('hello');

      // 触发自定义事件
      document.querySelector('#bar').addEventListener('click', function () {
        this.dispatchEvent(helloEvent);
      });

      // 监听自定义事件，捕获
      window.addEventListener(
        'hello',
        function () {
          console.log(1);
        },
        true
      );

      // 监听自定义事件，捕获
      document.querySelector('#foo').addEventListener(
        'hello',
        function () {
          console.log(2);
        },
        true
      );

      // 监听自定义事件，捕获
      document.querySelector('#bar').addEventListener(
        'hello',
        function () {
          console.log(3);
        },
        true
      );

      // 监听自定义事件，冒泡
      document.querySelector('#bar').addEventListener('hello', function () {
        console.log(4);
      });

      // 监听自定义事件，冒泡
      // 由于不允许冒泡，因此监听不到
      document.querySelector('#foo').addEventListener('hello', function () {
        console.log(5);
      });

      // 监听自定义事件，冒泡
      // 由于不允许冒泡，因此监听不到
      window.addEventListener('hello', function () {
        console.log(6);
      });
    </script>
  </body>
</html>

示例：

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">
      <p id="bar">hello, world</p>
    </div>
    <script>
      // 创建自定义事件，允许冒泡
      const helloEvent = new Event('hello', {
        bubbles: true,
      });

      // 触发自定义事件
      document.querySelector('#bar').addEventListener('click', function () {
        this.dispatchEvent(helloEvent);
      });

      // 监听自定义事件，捕获
      window.addEventListener(
        'hello',
        function () {
          console.log(1);
        },
        true
      );

      // 监听自定义事件，捕获
      document.querySelector('#foo').addEventListener(
        'hello',
        function () {
          console.log(2);
        },
        true
      );

      // 监听自定义事件，捕获
      document.querySelector('#bar').addEventListener(
        'hello',
        function () {
          console.log(3);
        },
        true
      );

      // 监听自定义事件，冒泡
      document.querySelector('#bar').addEventListener('hello', function () {
        console.log(4);
      });

      // 监听自定义事件，冒泡
      document.querySelector('#foo').addEventListener('hello', function () {
        console.log(5);
      });

      // 监听自定义事件，冒泡
      window.addEventListener('hello', function () {
        console.log(6);
      });
    </script>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/24/JavaScript%E4%B8%AD%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/

本文对你有帮助？请支持我

支付宝
微信