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>


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

机器视觉学习笔记(一)

来秦皇岛快一周了,跟导师、学长聊了聊,觉得自己还是想做机器视觉,毕竟做一个智能机器人或者做智能家居一直是我的兴趣所在。这两天学了opencv,进度很慢,有待提高效率。在csdn上发现了很多有用的资料,...
  • sunlightli1216
  • sunlightli1216
  • 2015年01月16日 11:19
  • 261

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分...
  • u012967849
  • u012967849
  • 2016年07月20日 14:08
  • 1956

机器学习笔记(二)(Draft Version)

摘要 笔记(一)中讨论的情况显示,模型越复杂并不一定error越小。那所以这些error到底来自什么地方呢? 1. bias 2. variance 在具体训练过程中,如果可以诊断error的...
  • yucicheung
  • yucicheung
  • 2017年09月18日 15:12
  • 342

西瓜书学习笔记(二)

啊啊啊啊啊,昨天本来第二章写了不少内容,但是不知道CSDN的Markdown编辑器是不会自动保存的,中途发别的博客会把之前编辑的也给覆盖掉,这一章就简单写点吧。第二章 模型评估与选择2.1 经验误差与...
  • Cyril__Li
  • Cyril__Li
  • 2017年04月25日 18:49
  • 390

node.js学习笔记(2)---Nodejs开发框架Express3.0开发手记–从零开始

目录 此文重点介绍Express3.0的开发框架,其中还会涉及到Mongoose,Ejs,Bootstrap等相关内容。   项目源码下载地址:http://download.csdn.net/det...
  • liuwu0720
  • liuwu0720
  • 2014年03月15日 10:59
  • 1602

javascript学习笔记

第一章 一、JavaScript概述 JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。 特点: 1.交互性(它可以做的就是信息的动态交互) 2.安全性(它不允许直接访问本地硬盘...
  • zhoulenihao
  • zhoulenihao
  • 2013年09月04日 23:04
  • 4108

CMAKE学习笔记(二)

声明:本文为转载博客(感谢网友dbzhang800),转载链接在博客末尾 在 Cmake学习笔记一 中通过一串小例子简单学习了cmake 的使用方式。 这次应该简单看看语法和常用的命令了。 ...
  • u012700322
  • u012700322
  • 2016年12月23日 14:26
  • 250

我的openwrt学习笔记(二):OpenWrt 开发环境搭建

首先我们首选的OpenWrt 编译环境是 Ubuntu,并且应尽量选择稳定的LTS版本,而不是更高版本的。这里我们推荐使用 Ubuntu 12.04 LTS或者Ubuntu 14.04 LTS作为编译...
  • xushx_bigbear
  • xushx_bigbear
  • 2015年08月18日 09:48
  • 19543

网络编程学习笔记整理(二)

摘录笔记 《TCP/IP高效编程 改善网络程序的44个技巧》socket的创建函数int socket (int domain,int type, int protocol)参数说明protocol需...
  • stecdeng
  • stecdeng
  • 2017年02月23日 14:47
  • 257

XSL学习笔记(二)

  第一部分学了7个元素,还有24个,一个一个学吧。  1、、、元素  与相比,两者都须是的子结点,但前者定义的模板规则优先级比较低,且必须为第一个子结点。两者的功能是相同的,都是将另一个定义好的XS...
  • Borenbao
  • Borenbao
  • 2006年04月14日 09:25
  • 1683
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript学习笔记(二)
举报原因:
原因补充:

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