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

阅时约 9 分钟

目录

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

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

语法:

实例:

欢迎交流点赞,谢谢!


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

1.直接添加

   <button οnclick="do_Click()">点击事件</button>

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(eventfunctionuseCapture)

说明:

语法说明
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>

效果图:

欢迎交流点赞,谢谢!