JavaScript 事件注册

最新推荐文章于 2024-03-06 10:15:04 发布

猿来是码农

最新推荐文章于 2024-03-06 10:15:04 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/tianyexing2008/article/details/127226569

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

注册事件处理程序有两种基本方式，第一种方式出现在 web 初期，给事件目标对象或文档元素设置属性；第二种方式更新并且更通用，是将事件处理程序传递给对象或元素的一个方法。

注册事件处理程序最简单的方式就是通过设置事件目标的属性为所需事件处理程序函数。按照约定，事件处理程序属性的名字由 “on” 后面跟着事件名组成，如：onclick、onchange、onload、onmouseover等，注意这些属性是区分大小写的，全是小写。以下是几种设置事件处理函数的方法。

1，设置JaveScript 对象属性为事件处理程序，如：

<!DOCTYPE html>
<html>
<head>
<title>event handler onload</title>
<meta charset="UTF-8">

<button id="shipping_address"> button1 </button>
<script>
	//设置window对象的onload 属性为一个函数
	//该函数是事件处理程序：当文档加载完毕时调用它
	window.onload = function() {
		window.alert("window load done");
		var elt = document.getElementById("shipping_address");
		elt.onclick = function() {
			window.alert("you click this button");
		}
	}
</script>
</head>

<body></body>
</html>

2，设置 HTML 标签属性为事件处理程序

如果这样做，属性值应该是 JavaScript 代码字符串，这段代码应该是事件处理程序，这段代码应该是事件处理程序函数的主体，而非完整的函数声明。也就是说，HTML 事件处理程序代码不应该用大括号包围且使用 function 关键字作为前缀。如：

<!DOCTYPE html>
<html>
<head>
<title>event handler onload</title>
<meta charset="UTF-8">

<button onclick="alert('Thank you')"> button1 </button>

</head>

<body></body>
</html>

3，addEventLister()

除 IE8 及之前版本外的所有浏览器都支持的标准事件模型中，任何能成为事件的目标的对象----这些对象包括 Window 对象、Document 对象和所有文档元素----都定义了一个名叫 addEventListener() 的方法，使用这个方法可以为事件目标注册事件处理程序。

addEventListener() 接受 3 个参数，第一个是要注册处理程序的事件类型，这个事件类型（或名字）是字符串，但它不应该包括用于设置事件处理属性的前缀 “on”。第二个参数是指定类型的事件发生时应该调用的函数。最后一个参数是布尔值。通常情况下，会给这个参数传递 false。如果传递了 true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。

<!DOCTYPE html>
<html>
<head>
<title>event handler onload</title>
<meta charset="UTF-8">

<button id="myButton"> click me </button>
<script>
	function Event() {
		window.alert("Thanks again!!!!!!!");
	}
	
	var b = document.getElementById("myButton");
	b.onclick = function() {
		window.alert("Thanks for clicking me!");
	}
	
	//第二个参数直接是匿名函数
	b.addEventListener("click", function(){window.alert("Thanks again!")}, false);
	
	//第二个参数是函数名称
	b.addEventListener("click", Event, false);
</script>
</head>

<body></body>
</html>

用 “click”作为第一个参数调用 addEventListener() 不会影响 onclick 属性的值。并且可以多次调用 addEventListener() 为同一个对象注册同一事件类型的多个处理程序函数。当对象上发生事件时，所有该事件类型的注册处理程序会按照注册顺序调用。使用相同参数在同一个对象上多次调用 addEventListener() 是没用的，处理程序只会注册一次。相对 addEventListener() 的是 removeEventListener() 方法。

4， attachEvent()

IE9 之前的IE不支持 addEventListener() 和 removeEventListener()。IE5 及以后版本定义了 attachEvent() 和 detachEvent()。

使用类似addEventListener() 和 removeEventListener()，但也有不同点：

1)，因为 IE 事件模型不支持事件捕获，所以 attachEvent() 和 detachEvent() 只有两个参数：事件类型及处理程序函数。

2)，第一个参数使用了带 “on” 前缀的事件处理程序属性名。例如，当给 addEventListener() 传递 “click”时，要给 attachEvent() 传递 “onclick”

3), attachEvent() 允许相同的事件处理程序函数注册多次，当特定的事件类型发生时，注册函数的调用次数和注册次数是一样的。通常使用情况为先判断是否支持，然后再具体使用，如：

<!DOCTYPE html>
<html>
<head>
<title>event handler attach</title>
<meta charset="UTF-8">

<button id="myButton"> click me </button>
<script>
	function Event() {
		window.alert("Thanks again!!!!!!!");
	}
	
	var b = document.getElementById("myButton");
	b.onclick = function() {
		window.alert("Thanks for clicking me!");
	}
	
	//第二个参数直接是匿名函数
	b.addEventListener("click", function(){window.alert("Thanks again!")}, false);
	
	//第二个参数是函数名称
	if(b.addEventListener) {
		b.addEventListener("click", Event, false);
	}
	else if(b.attachEvent) {
		b.addEventListener("onclick", Event);
	}
</script>
</head>

<body></body>
</html>