实现比较通用的DOM事件挂载、事件卸载（兼容）

柔光的暖阳◎ 2021-07-24 18:27 308阅读 0赞

/**
     * DOM 事件挂载
     * el DOM元素
     * eventName 事件名
     * listener 监听函数
     * capture 是否是捕获阶段
     */
    function install(el, eventName, listener, capture) {
        if (el.addEventListener) {
            el.addEventListener(eventName, listener, capture);
        }else {
            el.attachEvent('on' + eventName, listener);
        }
    }
    
    /**
     * DOM 事件卸载
     * el DOM元素
     * eventName 事件名
     * listener 监听函数
     * capture 是否是捕获阶段
     */
    function uninstall(el, eventName, listener, capture) {
        if (el.removeEventListener) {
            el.removeEventListener(eventName, listener, capture);
        }else {
            el.detachEvent('on' + eventName, listener);
        }
    }

下面来测试一下：

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            </head>
            <body>
            	<div id="clickDiv" style="height:100px;width:100px;background:green;"></div>
            	<button id="install">事件挂载</button>
            	<button id="uninstall">事件卸载</button>
            </body>
    <script>
    /**
     * DOM 事件挂载
     * el DOM元素
     * eventName 事件名
     * listener 监听函数
     * capture 是否是捕获阶段
     */
    function install(el, eventName, listener, capture) {
        if (el.addEventListener) {
            el.addEventListener(eventName, listener, capture);
        }else {
            el.attachEvent('on' + eventName, listener);
        }
    }
    
    /**
     * DOM 事件卸载
     * el DOM元素
     * eventName 事件名
     * listener 监听函数
     * capture 是否是捕获阶段
     */
    function uninstall(el, eventName, listener, capture) {
        if (el.removeEventListener) {
            el.removeEventListener(eventName, listener, capture);
        }else {
            el.detachEvent('on' + eventName, listener);
        }
    }
    
    (function(){
    	var clickDiv = document.getElementById("clickDiv");
    	var installButton = document.getElementById("install");
    	var uninstallButton = document.getElementById("uninstall");
    		installButton.onclick=function(){
    			install(clickDiv, 'click', divClick, false);
    		}
    	
    		uninstallButton.onclick=function(){
    			uninstall(clickDiv, 'click', divClick, false);
    		}
    	
    	function divClick(){
    		console.log('divClick');
    	}
    
    })()
    
    
    
    </script>
    </html>

刚进来页面的时候，点击div没有反应，点击事件挂载按钮以后，再点击DIV会打印，因为事件被挂载了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

然后再点击事件卸载，div的点击就没有打印了，因为事件已经被卸载了

### 是兼容IE的，给个赞吧！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/fb44645ffe5f46869a3f2cacdfdd4d05.png