JavaScript：事件处理程序_A_山水子农的博客-程序员秘密

技术标签： DOM级事件处理程序 HTML事件处理程序事件捕获 JavaScript 事件冒泡 IE事件处理程序

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
一、事件流
事件流描述的是从页面中接收事件的顺序，IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。
1、事件冒泡

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的HTML页面为例：

<html>
<head>
    <title>山水子农</title>
</head>
<body>
    <div>Click Me</div>
</body>
</html>

如果你单击了页面中的<div>元素，那么这个click事件会按照如下顺序传播：

div -> body -> html ->　document
对于冒泡流的事件流机制，存在如下的兼容问题：
IE5.5及更早版本： div -> body -> document
IE5.5之后到IE9之前： div -> body -> html ->　document
IE9、Firefox、Chrome和Safari： div -> body -> html ->　document -> window

<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8">
<body id='body'>
<div id="box">
   <input type="button" value="按钮" id="btn">
</div>
<script>
function bodyz(){
   alert('我是body');
}
function boxz(){
   alert('我是div');
}
function btnz(event){
   alert('我是input');
   //event.stopPropagation();阻止事件冒泡之后点击按钮就不会出现‘我是div’、‘我是body’
}
var body=document.getElementById('body');
var box=document.getElementById('box');
var btn=document.getElementById('btn');
box.addEventListener('click',boxz,false);
btn.addEventListener('click',btnz,false);
body.addEventListener('click',bodyz,false);
</script>
</body>
</head>

点击按钮会依次弹出：‘我是input’、‘我是div’、‘我是body’

2、事件捕获

事件开始的时候由最不具体的节点接收，然后逐级向下传播到最具体的节点。事件捕获的用意在于在事件达到预定目标之前捕获它。以上面的实例来看，click事件的执行顺序为：document -> html -> body -> div

虽然事件捕获是Netscape Communicator唯一支持的事件流模型，但IE9、Firefox、Chrome、Opera和Safari目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议大家放心地使用事件冒泡，在有特殊需要时在使用事件捕获。

3、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供机会。然后实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

二、事件处理程序

1、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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function showMessage(){
	alert("HTML 事件处理程序");
}
</script>
<title>HTML 事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me1" οnclick="alert('HTML 事件处理程')"/>
<input type="button" value="Click Me2" οnclick="showMessage()"/>
</body>
</html>

在HTML中指定事件处理程序有两个缺点：

（1）、存在一个时差问题。因为用户可能会在HTML元素出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。

（2）、HTML与JavaScript代码紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和JavaScript代码。而这正是许多开发人员放弃HTML事件处理程序，转而使用JavaScript指定事件处理程序的原因所在。

2、DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM0级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var btn=document.getElementById("myBtn");
btn.οnclick=function(){
	alert("DOM0级事件处理程序");
	setTimeout(function(){
	    btn.οnclick=null;//删除事件处理程序
	    alert("删除事件处理程序");
    },200);
}
</script>
</body>
</html>

3、DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有的DOM节点中都包含这两个方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){//click不要on，三个参数。
	alert("DOM2级事件处理程序1");
},false);
btn.addEventListener("click",function(){
	alert("DOM2级事件处理程序2");
},false);
//先输出DOM2级事件处理程序1后DOM2级事件处理程序2
</script>
</body>
</html>

DOM0和DOM2级事件处理程序都有一个共同的优点就是可以同时添加多个事件处理程序。使用removeEventListener()移除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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM2级事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var btn=document.getElementById("myBtn");
var handler=function(){
	alert("DOM2级事件处理程序");
	setTimeout(function(){
	    btn.removeEventListener("click",handler,false);
	    alert("删除事件处理程序");
   },1000);
};
btn.addEventListener("click",handler,false);
</script>
</body>
</html>

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。

4、IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){//click要加on，两个参数。
	alert("IE事件处理程序1");
});
btn.attachEvent("onclick",function(){
	alert("IE事件处理程序2");
});
//先输出IE事件处理程序2后IE事件处理程序1.
</script>
</body>
</html>

使用detachEvent()移除attachEvent()事件时，移除时传入的参数与添加处理程序时使用的参数相同。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var btn=document.getElementById("myBtn");
var handler=function(){
	alert("IE事件处理程序");
	setTimeout(function(){
	    btn.detachEvent("onclick",handler);
	    alert("删除事件处理程序");
   },1000);
};
btn.attachEvent("onclick",handler);
</script>
</body>
</html>

5、跨浏览器的事件处理程序

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨浏览器的事件处理程序</title>
</head>
<body>
<input type="button" value="Click Me" id="myBtn"/>
<script>
var EventUtil={
   addHandler:function(element,type,handler){
       if(element.addEventListener){//DOM2级
		   element.addEventListener(type,handler,false);
	   }else if(element.attachEvent){//IE
	       element.attachEvent("on"+type,handler);
	   }else{
		   element["on"+type]=handler;//DOM0级 <span style="font-family: Arial, Helvetica, sans-serif;">element[onclick]</span><span style="font-family: Arial, Helvetica, sans-serif;"> ===element.onclick</span>
	   }
   },//此处的","千万别忘记，EventUtil是对象。
   removeHandler:function(element,type,handler){
       if(element.removeEventListener){//DOM2级
		   element.removeEventListener(type,handler,false);
	   }else if(element.detachEvent){//IE
	       element.detachEvent("on"+type,handler);
	   }else{
		   element["on"+type]=null;//DOM0级
	   }      
   }
}
var btn=document.getElementById("myBtn");
var handler=function(){
	alert("跨浏览器的事件处理程序");
	setTimeout(function(){
	    EventUtil.removeHandler(btn,"click",handler);
	    alert("删除事件处理程序");
   },1000);
};
EventUtil.addHandler(btn,"click",handler);//事件类型不要加"on"
</script>
</body>
</html>

本文链接：https://blog.csdn.net/qq_27626333/article/details/51584919

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

windows删除“找不到该项目”的文件_magi617的博客-程序员秘密

1、编写一个自动删除脚本，内容如下：右键，新建文本文件重命名为del.bat编辑内容：del /F /A /Q \?\%1（第一行）rd /S /Q \?\%1（第二行）2、把要删除的文件直接拖到该脚本上即可删除3、原理方法采纳自百度经验删除文件时提示“找不到该项目”，怎么解决?del为windows删除文件的命令，rd为windows删除目录的命令，/F为强制删除参数，/A为根据文件

BeanUtils.copyProperties 如果Integer 或Long 为null 默认赋值0_空白-键的博客-程序员秘密

转自：http://nassir.iteye.com/blog/1585692BeanUtils.copyProperties(A,B);如果B中的Integer类型的数据是null的，那么通过这个方法复制给A后，这个null的Integer数据会变成0。也就是它有自己的规则，如果发现Integer类型的数据如果是null的，它会自作多情的给个默认值！这个自作多

mybitsPlus QueryWrapper表关联分页查询_querywrapper关联查询_怪异的bug的博客-程序员秘密

mybitsPlus QueryWrapper多表关联分页查询

阿里巴巴数据分析师 2018.3笔试汇总_阿里巴巴数据分析师初级考试_Sisyphus.的博客-程序员秘密

是的，我又去笔试了，虽然被完虐，但是起码可以知道自己想要从事这一行业，应该要学些什么了。首先，概率论的题占大部分。这部分比较考验人的数学功底，和逻辑能力。其次，就是是数据库了，一道简答题，问题是比较简单的SQL语句。最后就是数据敏感性了。这个比较抽象。话不多说，上真题。首先是选择题：1.每一下午7点钟在10min内打到车的概率是90%，问，一周内至少两天打不到车的概率。2.有20个同学参加面试，其...

市场营销学9——产品策略_产品策略定义_长烟慢慢的博客-程序员秘密

1、什么是产品策略产品策略是市场营销4P组合的核心，是价格策略、分销策略和促销策略的基础。从社会经济发展看，产品的交换是社会分工的必要前提，企业生产与社会需要的统一是通过产品来实现的，企业与市场的关系也主要是通过产品或服务来联系的，从企业内部而言，产品是企业生产活动的中心。因此，产品策略是企业市场营销活动的支柱和基石。　　产品策略是指企业制定经营战略时，首先要明确企业能提供什么样的产品

MAR与MDR是什么？_mar和mdr_自由的犇儿哥的博客-程序员秘密

Baby StepsWe’re going to take the first step in “building” the CPU. We’re going to introduce two registers: the MAR and the MDR. We assume both are 32-bit parallel load registers.MARMAR is short for memory address register. This register has its output