JS 自定义事件之 Event 和 CustomEvent

JS 中可以使用 Event 和 CustomEvent 两个构造函数实现自定义事件

Event

语法

event = new Event(typeArg, eventInit)

typeArg:DOMString 类型,表示所创建事件的名称
eventInit:可选,自定义事件的配置参数,可接受以下字段

字段 是否必选 类型 默认值 描述
bubbles Boolean false 表示该事件是否冒泡
cancelable Boolean false 表示该事件能否被取消
composed Boolean false 指示事件是否会在影子DOM根节点之外触发侦听器

示例一,定义一个可以冒泡的事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
</head>
<body>
  <div id="myid"></div>
  <script>
    let mydiv = document.getElementById('myid')

    // 定义事件
    let diyEvent = new Event('printHello', {
      bubbles: false
    })

    // 添加监听
    mydiv.addEventListener('printHello', function () {
      // 会打印
      console.log('Hello World From Mydiv')
    })
    document.addEventListener('printHello', function () {
      // 会打印
      console.log('Hello World From Document')
    })

    // 发送事件
    mydiv.dispatchEvent(diyEvent)
  </script>
</body>
</html>

因为定义的事件指明了可冒泡,所以 document 的监听日志也会打印
关于事件冒泡的详细讲解,可移步至传送门

示例二,定义一个能被取消的事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
</head>
<body>
  <div id="myid"></div>
  <script>
    let mydiv = document.getElementById('myid')

    // 定义事件
    let diyEvent = new Event('printHello')

    // 添加监听
    mydiv.addEventListener('printHello', function (event) {
      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
        event.preventDefault();
      } else {
        // 不会打印
        console.log('Hello World From Mydiv')
      }
    })

    // 发送事件
    mydiv.dispatchEvent(diyEvent)
  </script>
</body>
</html>

示例三,给事件添加属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
</head>
<body>
  <div id="myid"></div>
  <script>
    let mydiv = document.getElementById('myid')

    // 自定义事件
    let diyEvent = new Event('printHello')
    diyEvent.myProp = 'I am event prop'

    // 添加事件监听
    mydiv.addEventListener('printHello', function (event) {
        console.log(event.myProp) // I am event prop
    })

    // 发送事件
    mydiv.dispatchEvent(diyEvent)
  </script>
</body>
</html>

CustomEvent

MDN 官网特别注明,该构造函数可在 Web Worker 中使用

语法

event = new CustomEvent(typeArg, customEventInit)

typeArg:DOMString 类型,表示所创建事件的名称
customEventInit:可选,自定义事件的配置参数,可接受以下字段

字段 是否必选 类型 默认值 描述
detail any false 事件初始化时传递的任何类型数据
bubbles Boolean false 同 Event,表示该事件是否冒泡
cancelable Boolean false 同 Event,表示该事件能否被取消
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="main.js"></script>
</head>
<body>
  <div id="myid"></div>
  <script>
    let mydiv = document.getElementById('myid')

    // 自定义事件
    let diyEvent = new CustomEvent('printHello', {
      detail: 'some detail text'
    })
    diyEvent.myProp = 'I am event prop'

    // 添加事件监听
    mydiv.addEventListener('printHello', function (event) {
        console.log(event.detail) // some detail text
        console.log(event.myProp) // I am event prop
    })

    // 发送事件
    mydiv.dispatchEvent(diyEvent)
  </script>
</body>
</html>
除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1084.html
京ICP备19044523号-1