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

悠悠 2021-07-24 12:28 464阅读 0赞

**目录**

我们知道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*)

说明：

<table style="width:500px;">  语法说明  
 <tbody> 
  <tr> 
   <td><em>event</em></td> 
   <td>必需。描述事件名称的字符串。<br><br><strong>注意：</strong>&nbsp;不要使用 "on" 前缀。比如用 "click" 来取代 "onclick"。</td> 
  </tr> 
  <tr> 
   <td><em>function</em></td> 
   <td>必需。描述了事件触发后执行的函数。</td> 
  </tr> 
  <tr> 
   <td><em>useCapture</em></td> 
   <td>可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。 <p>true ：事件在捕获阶段执行</p> <p>false:：默认。事件在冒泡阶段执行</p> </td> 
  </tr> 
 </tbody> 
</table>

如果浏览器不支持 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>

效果图:

![2020121614272215.png][]

# 欢迎交流点赞，谢谢！ #

[2020121614272215.png]: /images/20210724/8ccc3e6a77004ed7842d047ab79461d8.png