實現比較通用的DOM事件掛載、事件解除安裝（相容）

學習永遠不會晚發表於2020-12-05
事件
/**
 * 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會列印，因為事件被掛載了：

然後再點選事件解除安裝，div的點選就沒有列印了，因為事件已經被解除安裝了

是相容IE的，給個贊吧！

 

相關文章