关闭

JavaScript学习笔记(二)

标签: domjavascript
138人阅读 评论(0) 收藏 举报

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="点我" onclick="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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1668次
    • 积分:68
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条
    文章存档
    最新评论