JavaScript DOM事件处理addEventListener（事件添加）removeEventListener（事件移出）兼容低版本IE（attachEvent、detachEvent）

最新推荐文章于 2024-07-01 16:22:16 发布

编程界小明哥

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量915

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111268974

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

我们知道JavaScript添加事件的方式有三种：

addEventsListener比前面两种有什么优势呢？

语法：

实例：

欢迎交流点赞，谢谢！

我们知道JavaScript添加事件的方式有三种：

1.直接添加

2.用document为对象赋值的方式

document.getElementById("box").οnclick=function(){
console.log(123);
}

3.addEventsListener方式

document.getElementById("box").addEventListener('click',function(){

},false)

addEventsListener比前面两种有什么优势呢？

1. addEventsListener 可以在文档中添加许多事件，添加的事件不会覆盖已存在的事件；而前面两种方式一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数

document.addEventListener("click", myFunction2);
document.addEventListener("click", myFunction2);

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
document.addEventListener("blur", myFunction3);

2.该方法同时支持事件处理的捕获和冒泡阶段，可以指定第3个参数来设置：默认是false (冒泡)，可以设置 true (捕获)。

语法：

document.addEventListener(event, function, useCapture)

说明：

语法说明
event	必需。描述事件名称的字符串。注意：不要使用 "on" 前缀。比如用 "click" 来取代 "onclick"。
function	必需。描述了事件触发后执行的函数。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 true ：事件在捕获阶段执行 false:：默认。事件在冒泡阶段执行

如果浏览器不支持 addEventListener方法, 你可以使用 attachEvent() 方法替代

下面看实例：

 
<!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>
        	<button id="install2">事件挂载多个</button>
        	<button id="uninstall1">事件卸载1</button>
        	<button id="uninstall2">事件卸载2</button>
        	<button id="uninstall12">事件卸载1和2</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');
	}
 
 
 
 	var install2Button = document.getElementById("install2");
 	install2Button.onclick=function(){
		install(clickDiv, 'click', divClick1, false);
		install(clickDiv, 'click', divClick2, false);
	}
 	function divClick1(){
		console.log('divClick1');
	}
 	function divClick2(){
		console.log('divClick2');
	}
	
	
	var uninstall1Button = document.getElementById("uninstall1");
	var uninstall2Button = document.getElementById("uninstall2");
	var uninstall12Button = document.getElementById("uninstall12");
	
	uninstall1Button.onclick=function(){
		uninstall(clickDiv, 'click', divClick1, false);
	}
		
	uninstall2Button.onclick=function(){
		uninstall(clickDiv, 'click', divClick2, false);
	}
	
	uninstall12Button.onclick=function(){
		uninstall(clickDiv, 'click', divClick1, false);
		uninstall(clickDiv, 'click', divClick2, false);
	}
	
})()
 
 
 
</script>
</html>

效果图:

欢迎交流点赞，谢谢！

编程界小明哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript DOM事件处理addEventListener（事件添加）removeEventListener（事件移出）兼容低版本IE（attachEvent、detachEvent）

目录我们知道JavaScript添加事件的方式有三种：addEventsListener比前面两种有什么优势呢？语法：实例：欢迎交流点赞，谢谢！我们知道JavaScript添加事件的方式有三种：1.直接添加 <button onclick="do_Click()">点击事件</button>2.用document为对象赋值的方式 document.getElementById("box").onclick=function()...
复制链接

扫一扫