js自定义事件

作者: 倚剑闯天涯_ | 来源:发表于2019-11-09 09:45 被阅读0次

三要素: document.createEvent() event.initEvent() element.dispatchEvent()

// (en:自定义事件名称,fn:事件处理函数,addEvent:为DOM元素添加自定义事件,triggerEvent:触发自定义事件)
window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEvent("test",function(){console.log("handler1")});
    demo.addEvent("test",function(){console.log("handler2")});
    demo.onclick = function(){
        this.triggerEvent("test");
    }
}
Element.prototype.addEvent = function(en,fn){
    this.pools = this.pools || {};
    if(en in this.pools){
        this.pools[en].push(fn);
    }else{
        this.pools[en] = [];
        this.pools[en].push(fn);
    }
}
Element.prototype.triggerEvent  = function(en){
    if(en in this.pools){
        var fns = this.pools[en];
        for(var i=0,il=fns.length;i<il;i++){
            fns[i]();
        }
    }else{
        return;
    }
}

相关文章

  • 自定义事件js

    title: 自定义事件date: 2017-06-06 15:36:04tags: 自定义事件 js的自定义事件...

  • jQuery例子记录(持续更新)

    目录: 1.自定义事件2.操作DOM(与JS原生对比) 1.自定义事件 绑定自定义事件: 事件名称refresh....

  • JS中的事件

    JS中的事件 一:自定义事件 1.使用Event自定义事件 使用Event接口,可以自定义事件。但是该接口无法在事...

  • mitt

    安装 js 引入: 发送mybus.emit('自定义事件名称','数据');接收mybus.on('自定义事件名...

  • Markdown

    touch.js学习 准备工作 引用 touch.js是百度开源的一套支持原生js事件和自定义事件的js库...

  • MarkDown学习

    touch.js学习 准备工作 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多...

  • MARKDOWN学习?

    touch.js学习 准备工作 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多...

  • touch.js

    touch.js学习 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含很多这种库 封...

  • IFE2017,动态数据绑定(二)学习笔记

    自定义事件 我们知道JS里绑定事件有addEventListener()这个方法。在JS中我们可以这样创建一个自定...

  • MarkDown学习

    touch.js学习 1.准备工作 touch.js是百度开源的一套支持原生js事件和自定义事件的js库js中包含...

网友评论

    本文标题:js自定义事件

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