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

最新推荐文章于 2022-01-12 22:43:57 发布

吴声子夜歌

最新推荐文章于 2022-01-12 22:43:57 发布

阅读量6.7k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript Js注册事件 Js销毁事件

本文链接：https://blog.csdn.net/cold___play/article/details/101466617

版权

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

注册事件

在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>