JavaScript学习笔记(二)

原创 2015年11月18日 19:43:38

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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript学习笔记2

  • 2017年07月31日 00:43
  • 3KB
  • 下载

javascript经典学习笔记

  • 2008年12月01日 17:21
  • 727KB
  • 下载

JAVASCRIPT学习笔记基础(二)

函数 JavaScript 函数 将脚本编写为函数,就可以避免页面载入时执行该脚本。 函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。 你可以在页面中的任何位置...

JavaScript学习笔记.pdf

  • 2012年09月28日 18:33
  • 8.79MB
  • 下载

javascript学习笔记发放1

  • 2008年11月19日 15:19
  • 63KB
  • 下载

javascript学习笔记(二)-闭包

闭包的理解和使用是学习js绕不过去的一道坎,为此笔者在阅读《javascript权威指南》的基础上又参考了几篇博客,终于了解个大概,下面就来和大家分享分享。...
  • wthfeng
  • wthfeng
  • 2016年10月28日 11:40
  • 220

JavaScript学习笔记

  • 2016年12月05日 09:10
  • 452KB
  • 下载

JavaScript学习笔记

  • 2016年08月05日 23:09
  • 2.56MB
  • 下载

学习笔记②: JavaScript基础指令

语句 一段脚本就是一系列计算机能够一步一步遵照执行的指令。 每一条单独的指令或步骤就被称为一条语句。 语句应该以分号结尾。注:JavaScript是大小写敏感的,所以例如 hour、Hour、 HOU...

html+javascript+css学习笔记

  • 2014年07月03日 22:16
  • 36KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript学习笔记(二)
举报原因:
原因补充:

(最多只允许输入30个字)