JavaScript学习笔记（二）

最新推荐文章于 2024-08-04 16:33:59 发布

hengs_dream

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量329

点赞数

文章标签： dom javascript

本文链接：https://blog.csdn.net/hengs_dream/article/details/49912035

版权

JavaScript DOM 事件句柄

句柄就是指如何触发一个事件

DOM EventListener

addEventListener()方法用于像指定元素添加事件句柄；

moveEventListener()方法用于移除方法添加的事件句柄；

如果给DOM对象绑定同一个事件指定不同的方法，则只有最后一个会生效。而使用addEventListener()方法则可以给同一个对象添加多个事件句柄。使用方法如下

element.addEventListener(type,listener,useCapture);其中，第一个参数是指触发的事件，第二个参数一般是JavaScript函数,第三个参数是可选的，用于描述事件是捕获还是冒泡。

冒泡：内部元素的事件会先被触发，外部元素的事件后被触发。

捕获：外部元素的事件先被触发，内部元素的事件后被触发。

用法：假设我想实现在浏览器中点击按钮出现警告弹窗，不使用addEventListener()方法的时候，一般这样做

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="div">hello</p>
<input type="button" value="点我" οnclick="demo();"/>
<script type="text/javascript">
	function demo(){
		alert("world");
	}
</script>

</body>
</html>

如果这个时候我想改变函数的名称，那我势必要对所以的“demo”进行修改，如果代码量十分大的话，这就显得很不明智。而我们可以通过添加事件句柄来避免这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="but">点我</button>
<script type="text/javascript">
	document.getElementById("but").addEventListener("click",function(){
		alert("hello world");
	});
</script>

</body>
</html>

值得注意的是，触发函数的事件是"click"而不是"onclick"

除此之外，上面我们也谈到过，addEventListener()方法能给事件添加多个句柄而不会被覆盖。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
.kk{
	width: 200px;
	height:200px;
	background-color: red;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="kk">
	<p id="word">hello</p>
</div>
<script type="text/javascript">
	var x=document.getElementById("word");
	x.addEventListener("mouseover",change);
	x.addEventListener("mouseout",demo);
	function change()
	{
		x.innerHTML="hello world";
	}
	function demo(){
		x.innerHTML="world world";
	}
</script>

</body>
</html>

比如这样，mouseover和mouseout都绑定在一个对象即"x"上面，但是他们所触发的事件都可以正常执行。

图片来自w3cschool，这是支持removeEventLisener()方法的浏览器版本。

removeEventListener()方法用来移除addEventListener()方法添加的事件句柄。

使用方法：element.removeEventListener(type,listener)。

比如上边举例子的代码，如果再添加事件句柄后，用removeEventListener()将他移除了，那么本该被触发的函数将不会再执行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="but">点我</button>
<script type="text/javascript">
	var x=document.getElementById("but");
	x.addEventListener("click",myfunction);
	function myfunction(){
		alert("hello world");
	}
	x.removeEventListener("click",myfunction);
</script>

</body>
</html>

hengs_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（二）

JavaScript DOM 事件句柄句柄就是指如何触发一个事件DOM EventListeneraddEventListener()方法用于像指定元素添加事件句柄；moveEventListener()方法用于移除方法添加的事件句柄；如果给DOM对象绑定同一个事件指定不同的方法，则只有最后一个会生效。而使用addEventListener()方法则可以给同一个对象添加多个事件
复制链接

扫一扫