js 有没有办法 判断一个dom元素是否已经绑定了某个事件

JavaScript013

js 有没有办法 判断一个dom元素是否已经绑定了某个事件,第1张

js 有办法 判断一个dom元素是否已经绑定了某个事件!

代码如下:

/*

* 事件注册

* @param Element ele

* @param String eventType

* @param Functionfn

* @param Boolean isRepeat

* @param Boolean isCaptureCatch

* @return undefined

*/

function loginEvent(ele , eventType , fn , isRepeat , isCaptureCatch){

if (ele == undefined || eventType === undefined || fn === undefined) {

throw new Error('传入的参数错误!')

}

if (typeof ele !== 'object') {

throw new TypeError('不是对象!')

}

if (typeof eventType !== 'string') {

throw new TypeError('事件类型错误!')

}

if (typeof fn !== 'function') {

throw new TypeError('fn 不是函数!')

}

if (isCaptureCatch === undefined || typeof isCaptureCatch !== 'boolean') {

isCaptureCatch = false

}

if (isRepeat === undefined || typeof isRepeat !== 'boolean') {

isRepeat = true

}

if (ele.eventList === undefined) {

ele.eventList = {}

}

if (isRepeat === false) {

for (var key in ele.eventList)

{

if (key === eventType) {

return '该事件已经绑定过!'

}

}

}

// 添加事件监听

if (ele.addEventListener) {

ele.addEventListener(eventType , fn , isCaptureCatch)

} else if (ele.attachEvent) {

ele.attachEvent('on' + eventType , fn)

} else {

return false

}

ele.eventList[eventType] = true

}

绑定事件 有直接在dom写el.on+type=function(){} 可以通过赋值重置为null

这种方式可以用typeof el.on+type =='function'

还有就是addEventListener/attachEvent,解绑就需要用removeEventListener/detachEvent

这个就难写了,我觉得如果事件是你自己绑定的,那就在绑定的时候,为元素添加属性标识

原生实现无法判断是否有事件。如果确实需要请参照以下代码,另外本代码只使用于调用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 =0i<arr.lengthi++){

                        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>