js 判断是不是存有事件 addeventlistener

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 判断是不是存有事件 addeventlistener相关的知识,希望对你有一定的参考价值。

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        /**
         * 此处代码必须放到任何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<arr.length;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);
        ;
    </script>
</head>
<body>
    <button id="test" >测试</button>
</body>
</html>

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

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

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

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

最后是true和false的解释,,事件在执行时都会有俩个流,一个是捕获事件流,另一个是冒泡事件流,进来的事件是捕获事件,出去的事件是冒泡事件,true的话会捕获进来时的,false的话会捕获出去时的,,本回答被提问者采纳

js给动态添加的元素绑定事件

一般我们绑定事件会直接对元素操作,比如bind(element,event,function),element.addEventLister(type,handle,false),element.click(function)之类的,但是如果这个元素是动态生成的,比如用father.append("element")方法添加的就玩不转了。

要给动态添加的元素绑定至少有3种办法

1.使用$("ul").dele("li","click",function(){});这个方法,把事件绑定到父元素上

2.使用$(document).on(‘click‘,‘#id‘,function(){ //soomething });是上一方法的原生版

3.在动态添加元素之后再给这个元素绑定事件,亲测可用,不过比较麻烦,不如前两种方法方便。

以上是关于js 判断是不是存有事件 addeventlistener的主要内容,如果未能解决你的问题,请参考以下文章

js中实现事件代理

js 事件监听封装

js/jquery 如何判断当前是不是具有某个事件 比如说是不是具有hover事件

js为元素添加监听事件

js给动态添加的元素绑定事件

用js如何判断一定时间内,是不是有键盘鼠标动作