js dispatchEvent派发自定义事件

低版本IE浏览器不兼容

dispatchEvent使用

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

<body>

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

<script>
    let box = document.querySelector(".box");

    box.addEventListener("click", function(e) {
        console.log(e, "我被点击了")
    })

    let event = new Event("click");
    box.dispatchEvent(event)
</script>

dispatchEvent()触发 控制台打印

我们点击box打印

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

dispatchEvent派发自定义事件

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

创建(createEvent)=>初始化(initEvent)=》派发(dispatchEvent)

代码如下:

body>

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

<script>
    let box = document.querySelector(".box");

    let event = document.createEvent("Event")

    // 定义事件名称
    event.initEvent("dong", true, true);

    // 监听事件
    box.addEventListener("dong", function(e) {
        console.log(e, "看到我了吗")
    })
    document.addEventListener("dong", function(e) {
        console.log(e, "看到我了吗")
    })

    box.onclick = function() {
        // 派发事件
        box.dispatchEvent(event);
    }
</script>

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

CustomEvent

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

new CustomEvent (eventname, options)

其中options可以是

{
  detail: {
    ...
  },//键名必须是detail
  bubbles: true,    //是否冒泡
  cancelable: false //是否取消默认事件
}

例子:

<body>

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

<script>
    let box = document.querySelector(".box");

    let event = document.createEvent("Event")

    // 监听事件
    box.addEventListener("dong", function(e) {
        console.log(e.detail, "看到我了吗")
    })

    let i = 0
    setInterval(() => {
        i++
        let event = new CustomEvent("dong", {
                detail: i
            })
            // 派发事件
        box.dispatchEvent(event);
    }, 1000);
</script>

控制台打印

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值