js自定义事件

小码哥・Martin

于 2022-08-31 17:11:16 发布

阅读量471

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/php_martin/article/details/125806671

版权

JavaScript 专栏收录该内容

108 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
    }
}