JS--JavaScript注册事件addEventListener()、销毁事件removeEventListener()

以你之姓@ 2021-08-14 02:26 719阅读 0赞

#### 注册事件 ####

在DOM事件模型中，通过调用对象的addEventListener()方法注册事件，用法如下：

element.addEventListener(String type, Function listener, boolean useCapture);

*  type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有on前缀。例如，对于事件属性为onclick来说，所对应的事件类型应为click。
 *  listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时，默认传递给它的唯一参数是event对象。
 *  useCapture：是一个布尔值。如果为true，则指定的事件处理函数将在事件传播的捕获阶段触发；如果为false，则事件处理函数将在冒泡阶段触发。

示例：使用addEventListener()方法为所有按钮注册click事件。

<button id="btn1" onclick="btn1();">按钮1</button>
    <button id="btn2" onclick="btn2(event);">按钮2</button>
    <script>
    	var btn = document.getElementsByTagName("button");
    	for(var i  in btn){ 
    		btn[i].addEventListener("click", function(){ 
    			alert(this.innerHTML);
    		}, true);
    	}
    </script>

使用addEventListener()方法能够为多个对象注册相同的事件处理函数，也可以为同一个对象注册多个事件处理函数。

示例：为段落p注册两个事件

<p id="p1">为对象注册多个事件</p>
    <script>
    	var p1 = document.getElementById("p1");
    	p1.addEventListener("mouseover", function(){ 
    			this.style.background = 'blue';
    	}, true);
    	p2.addEventListener("mouseover", function(){ 
    			this.style.background = 'red';
    	}, true);
    </script>

#### 销毁事件 ####

在DOM事件模型中，使用removeEventListener()方法可以从指定对象中删除已经注册的事件处理函数。

element.removeEventListener(String type, Function listener, boolean useCapture);

参数与addEventListener()方法相同。

示例：分别为按钮a和b注册单击事件，b的事件函数为删除a的事件

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input id="a" type="button" value="点我" />
    		<input id="b" type="button" value="删除事件"/>
    		<script> var a = document.getElementById("a"); var b = document.getElementById("b"); function ok(){ alert("你好!"); } function delete_event(){ a.removeEventListener("click", ok, false); } a.addEventListener("click", ok, false); b.addEventListener("click", delete_event, false); </script>
    	</body>
    </html>

注 意 ： \\color\{red\}\{注意：\} 注意：removeEventListener()方法只能删除addEventListener()注册的事件。如果直接使用onclick等直接写在元素上的事件，将无法使用removeEventListener()方法删除!