提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

事件 实现 比较 卸载 通用 兼容 挂载 dom
2023-09-11 14:21:46 时间 
/**
 * 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的，给个赞吧！

 

相关文章