• js dispatchEvent派发自定义事件

    低版本IE浏览器不兼容

    dispatchEvent使用

    在标准浏览器提供了元素触发自定义事件的方法 element.dispatchEvent()，就是说，我们可以不用在DOM上点击按钮触发事件，在代码里通过 dispatchEvent（）就能触发事件。如下：

    1. <body>
    2.  
    3.     <div class="box">div>
    4. body>
    5.  
    6. <script>
    7.     let box = document.querySelector(".box");
    8.  
    9.     box.addEventListener("click", function(e) {
    10.         console.log(e, "我被点击了")
    11.     })
    12.  
    13.     let event = new Event("click");
    14.     box.dispatchEvent(event)
    15. script>

    dispatchEvent（）触发 控制台打印

    我们点击box打印

    我们可以看到 isTrusted 这个属性如果是代码触发 是false，如果是用户自己就是true，从这个属性我们可以判断这个事件是否是用户触发。 

    dispatchEvent派发自定义事件

    一般情况我们使用dispatchEvent派发自定义事件的流程是：

    创建（createEvent）=>初始化（initEvent）=》派发（dispatchEvent）

    代码如下：

    1. body>
    2.  
    3.     <div class="box">div>
    4. body>
    5.  
    6. <script>
    7.     let box = document.querySelector(".box");
    8.  
    9.     let event = document.createEvent("Event")
    10.  
    11.     // 定义事件名称
    12.     event.initEvent("dong", true, true);
    13.  
    14.     // 监听事件
    15.     box.addEventListener("dong", function(e) {
    16.         console.log(e, "看到我了吗")
    17.     })
    18.     document.addEventListener("dong", function(e) {
    19.         console.log(e, "看到我了吗")
    20.     })
    21.  
    22.     box.onclick = function() {
    23.         // 派发事件
    24.         box.dispatchEvent(event);
    25.     }
    26. script>

    我们定义了 dong 事件 ，然后监听事件， 通过用户点击去派发事件，这样 监听 dong 的这个事件就会接受到消息。

    CustomEvent

    CustomEvent 可以创建一个更具体的自定义事件，并且可以携带额外的参数.

    new CustomEvent (eventname, options)

    其中options可以是

    1. {
    2.   detail: {
    3.     ...
    4.   },//键名必须是detail
    5.   bubbles: true,    //是否冒泡
    6.   cancelable: false //是否取消默认事件
    7. }

    例子：

    1. <body>
    2.  
    3.     <div class="box">div>
    4. body>
    5.  
    6. <script>
    7.     let box = document.querySelector(".box");
    8.  
    9.     let event = document.createEvent("Event")
    10.  
    11.     // 监听事件
    12.     box.addEventListener("dong", function(e) {
    13.         console.log(e.detail, "看到我了吗")
    14.     })
    15.  
    16.     let i = 0
    17.     setInterval(() => {
    18.         i++
    19.         let event = new CustomEvent("dong", {
    20.                 detail: i
    21.             })
    22.             // 派发事件
    23.         box.dispatchEvent(event);
    24.     }, 1000);
    25. script>

    控制台打印

    使用这个方法我们可以监听一些不是由用户触犯的事件或者方法， 如socket等 

  • 相关阅读:
    vue项目中实际构建echarts拓扑关系图业务
    java---Stream流
    DTSE Tech Talk | 第10期：云会议带你入门音视频世界
    当遇到修复错误0xc000000e时，你的电脑需要修复。如何在Windows 11/10上修复此错误
    数据埋点入门扫盲
    labview编程笔记之顺序结构
    Linux安装各种应用服务程序
    hcie培训价格多少钱？
    [Linux] 实现简单的线程池
    【数据结构】优先级队列（堆）重点知识汇总（附有代码）
  • 原文地址：https://blog.csdn.net/weixin_43845059/article/details/132853384