js 判断是否存有事件 addeventlistener

2024-11-29 00:54:27
推荐回答(2个)
回答1:

原生实现无法判断是否有事件。如果确实需要请参照以下代码,另外本代码只使用于调用dom2形式加载或者移除事件功能,对应dom0类型的没有做测试。

以下代码修改了原生的Element对象,是否需要这样做,请自己酌情处理。




    
    
    
        /**
         * 此处代码必须放到任何javascript代码之前。另外增加事件只能用addEventListener形式。
         */
        (function() {
            Element.prototype.eventListenerList = {};
            Element.prototype._addEventListener = Element.prototype.addEventListener;
            Element.prototype._removeEventListener = Element.prototype.removeEventListener;
            Element.prototype.addEventListener = function(a,b,c) {
                this._addEventListener(a,b,c);
                if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
                this.eventListenerList[a].push(b);
            };
            Element.prototype.removeEventListener = function(a,b,c){
                this._removeEventListener(a, b,c);
                if(this.eventListenerList[a]){
                    var arr = this.eventListenerList[a];
                    for(var i =0;i                        if(arr[i].toString() === b.toString()){
                            this.eventListenerList[a].splice(i,1);
                        }
                    }
                }
            }
        })();
        //此后为测试代码。
        window.onload = function(){
            var dom = document.getElementById("test");
            //增加三个监听
            dom.addEventListener("click",function(){
                console.info("click function");
            },false);
            dom.addEventListener("click",function(){
                console.info("click function2");
            },false);
            dom.addEventListener("click",function(){
                console.info("click function3");
            },false);
 
            console.log(dom.eventListenerList["click"].length);
            //读出监听的方法
            var clicks = dom.eventListenerList.click;
            if(clicks) clicks.forEach(function(f) {
                console.log("I listen to this function: "+f.toString());
            });
            //删除监听
            dom.removeEventListener("click",function(){
                console.info("click function");
            },false);
             
            console.log(dom.eventListenerList["click"].length);
        };
    


    测试

回答2:

addEventListener()绑定事件的对象方法。
addEventListener()含有三个参数,一个是事件名称,另一个是事件执行的函数,最后一个是事件捕获,,

obj.addEventListener("click",function(){},true/false);

这里的事件名称跟直接写的事件名称不一样,在这里前面没有on,

还有就是按以往的方法定义事件的话后面的会覆盖掉前面的事件函数,
但是按这种方式写的话几个事件函数都会执行,

最后是true和false的解释,,事件在执行时都会有俩个流,一个是捕获事件流,另一个是冒泡事件流,进来的事件是捕获事件,出去的事件是冒泡事件,true的话会捕获进来时的,false的话会捕获出去时的,,