美文网首页
DOM Event: 自定义事件

DOM Event: 自定义事件

作者: butterandfly | 来源:发表于2016-11-10 20:12 被阅读0次

CustomEvent接口的规范在这里:CustomEvent

现代的前端框架、库或“Custom Elements”等都需要自定义事件来扩展一个模块的功能。当然这些框架/库可能直接提供一些方便的API,如Polymer:

this.fire('myevent', {message: 'success'}, {bubbles: false});

而下面介绍的是,在不依赖特定框架/库的情况下如何创建及使用自定义事件。

创建自定义事件

为了确保对旧版IE的兼容性,以前通常会使用document.createEventinitCustomEvent的方式来创建自定义事件。
但更现代的浏览器可以直接使用下面这种方式。

// 创建种类为myevent的自定义事件,并放置数据
let myEvent = new CustomEvent("myevent", {
  detail: {
    doILoveRed: true
  }
});

// 监听myevent事件
obj.addEventListener("myevent", function(event) { 
    console.log(event.detail); // {doILoveRed: true}
});

// 触发事件
obj.dispatchEvent(myEvent);

相关文章

  • DOM事件

    DOM事件的级别 DOM事件模型 DOM事件流 描述DOM时间捕获的具体流程 Event对象的常见应用 自定义事件...

  • DOM事件

    基本概念 DOM事件类型 DOM事件流 DOM事件捕获的具体流程 Event对象的常见应用 自定义事件

  • 前端知识点之DOM 事件类

    知识点:--DOM 事件的级别--DOM 事件模型和事件流--Event 对象的常见应用--自定义事件 DOM 事...

  • 自定义事件深入

    1.原生dom绑定系统事件 2.非原生dom绑定自定义事件 Event组件:Event非原生DOM节点,而绑定的c...

  • js,vue实现给元素绑定自定义事件

    1.利用dispatchEvent给元素绑定自定义事件 dom.dispatchEvent(new Event('...

  • 何时需要使用beforeDestroy

    ①解绑自定义事件 event.$off②消除定时器③解绑自定义的DOM事件 如window.scroll等

  • 3-3 DOM 事件

    一、事件级别 二、事件模型 三、事件流 四、描述DOM事件捕获的具体流程 五、Event对象的常见应用 六、自定义...

  • 什么是DOM的事件委托

    DOM的事件委托(Event delegation)是通过事件 ”冒泡“ (event propagation) ...

  • DOM事件(二)

    一、 事件对象 1.1 DOM中的事件对象 在触发DOM上的某个事件时,会产生一个事件对象event: event...

  • JavaScript自定义事件

    事件是与DOM交互的最常见方式,但他们也可以用于非DOM代码中,称为自定义事件,看上去有点node的event的味...

网友评论

      本文标题:DOM Event: 自定义事件

      本文链接:https://www.haomeiwen.com/subject/zvmxpttx.html