js自定义事件

最新推荐文章于 2024-02-22 22:15:00 发布

原创最新推荐文章于 2024-02-22 22:15:00 发布 · 494 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript 专栏收录该内容

108 篇文章

订阅专栏

本文深入探讨了JavaScript中的自定义事件，包括创建和触发自定义事件的三个关键要素，为开发者提供了一种扩展和沟通代码组件的有效方式。

js自定义事件

三要素： 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;
    }
}