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

注册事件

在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的事件


<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()方法删除!

你可能感兴趣的:(JavaScript,JavaScript,Js注册事件,Js销毁事件)