JavaScript事件流详解

解Javascript事件流

事件流

事件流出现的历史背景

当浏览器发展到第四代时(IE4 及 Netscape Communicator 4)，浏览器开发团队遇到了一个很有意思的问题:页面的哪一部分会拥有某个特定的事件?要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上的所有圆。两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。换句话说，在单击按钮的同时，你也单击了按钮的容器元素，甚至也单击了整个页面。

事件流描述的是从页面中接收事件的顺序。

但有意思的是，IE 和 Netscape 开发团队居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而 Netscape Communicator 的事件流是事件捕获流。

事件冒泡

IE的事件流叫做时间冒泡，即事件开始时由文档中最内层的元素接收，然后逐级往上传播。

<!DOCTYPE html>
<html>
 <head>
 <title>Event Bubbling Example</title>
 </head>
 <body>
 <div id="myDiv">Click Me</div>
 </body>
</html>

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

div->body->html->document

也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。图 13-1 展示了事件冒泡的过程。

IE事件流

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过<html>元素(从<body>直接跳到 document)。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如果仍以前面的 HTML 页面作为演示事件捕获的例子，那么单击<div> 元素就会以下列顺序触发 click 事件。

document->html->body->div

在事件捕获过程中，document 对象首先接收到 click 事件，然后事件沿 DOM 树依次向下，一直传播到事件的实际目标，即<div>元素。

事件捕获

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

由于老版本的浏览器不支持，因此很少有人使用事件捕获。

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的 HTML 页面为例，单击<div>元素会按照如下图所示顺序触发事件。

DOM事件流

在 DOM 事件流中，实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div> 上发生，并在事件处理(后面将会讨论这个概念)中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

多数支持 DOM 事件流的浏览器都实现了一种特定的行为;即使“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

之后我们讲解事件处理顺序。

文章参考《JavaScript高级程序设计》（第三版）。

件流:

事件冒泡

取消冒泡：oEvent.cancelBubble=true

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function (ev)
    {
    var oEvent=ev||event;

    oDiv.style.display='block';
    //alert('按钮被点击了');

    oEvent.cancelBubble=true; //取消事件冒泡,是解决许多问题的方法和手段
    };

    document.onclick=function ()
    {
    oDiv.style.display='none';
    //alert('document被点击了');
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

冒泡型事件：

<html>
<head>
<title>冒泡型事件</title>
<script language="javascript">
function add(sText){
var oDiv=document.getElementById("display");
oDiv.innerHTML +=sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>
</html>

执行顺序:p对象 -> div对象 -> body对象

冒泡型事件执行顺序::由内到外(p -> div -> body -> document)

注意: DOM 0级只有冒泡, 没有捕获

捕获型事件

相对于IE使用冒泡型事件, Netscape使用了另一种称为捕获型事件(eventcapturing)的解决方案;

addEventListener(事件名称,函数, bCapture)

removeEventListener(事件名称, 函数, bCapture)

事件监听函数第三个参数bCapture确定是冒泡型还是捕获型事件(true:捕获 false:冒泡,默认值false)

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv2">
<p id="myP2">点击该段落， 我是捕获</p>
</div>
<script>
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV 元素!");
}, true);
</script>
</body>
</html>

执行顺序: div对象 -> p对象

捕获型事件执行顺序:由外到内(如:document -> body -> div -> p)

冒泡型：事件从内部往外部依次执行。

捕捉型：事件从外部往内部依次执行。

事件监听

通用监听方法：

1.直接在HTML标签中分配事件处理函数：

<script language="javascript">
function add(sText){
var oDiv=document.getElementById("display");
oDiv.innerHTML +=sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>

2.结构与行为的分离：

<html>
<head>
<title>监听函数</title>
<script language="javascript">
window.onload=function(){
var oP=document.getElementById("myP"); //找到对象
oP.onclick=function(){ //设置事件监听函数
alert('我被点击了');
}
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

事件监听的作用:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
alert('a');
};
window.onload=function ()
{
alert('b');
};
</script>
</head>
<body>
</body>
</html>

以上程序只弹出alert('b');

理解:对同一对象执行两次事件(同一事件类型)处理函数时,往往只能只执行后一个

因此如果要让脚本在本浏览器中正常运行的话，就必须使用浏览器所支持的事件监听器

IE中的监听方法：

attachEvent(事件名称, 函数), 绑定事件处理函数 attach: 贴上, 附着

detachEvent(事件名称, 函数), 解除绑定 detach: 分离, 拆开

注意：IE只支持冒泡型事件监听, 没有第三个参数, 事件名称前要加"on";

<html>
<head>
<title>多个监听函数</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
}
function fnClick2(){
alert("我被fnClick2点击了");
//oP.detachEvent("onclick",fnClick1); //删除监听函数1
}
var oP;
window.onload=function(){
oP=document.getElementById("myP"); //找到对象
oP.attachEvent("onclick",fnClick1); //添加监听函数1
oP.attachEvent("onclick",fnClick2); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

标准DOM的事件监听：

addEventListener(事件名称,函数, 捕获)

element.addEventListener(event, function, useCapture)

removeEventListener(事件名称, 函数, 捕获)

element.removeEventListener(event, function, useCapture)

bCapture 是用于冒泡阶段还是捕获阶段(true:捕获 false:冒泡,默认值false)

注意:IE9版本已支持

<html>
<head>
<title>标准DOM的事件监听</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
//oP.removeEventListener("click",fnClick2,false); //删除监听函数2
}
function fnClick2(){
alert("我被fnClick2点击了");
}
var oP;
window.onload=function(){
oP=document.getElementById("myP"); //找到对象
oP.addEventListener("click",fnClick1,false); //添加监听函数1
oP.addEventListener("click",fnClick2,false); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

编写兼容性事件监听函数

function addEvent(obj, ev, fn){
    if(obj.addEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}
function removeEvent(obj, ev, fn){
    if(obj.removeEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}

实例:

avascript事件基础-事件流

#JavaScript#

事件流就是多个节点对象对同一个事件进行响应的先后顺序。

1.冒泡型

事件从上向下进行响应，称冒泡

实例1.含五层嵌套的Div标签，当点击Div事件时，对象边框边红色，并抓取标签名。

代码演示

浏览结果

点击click事件，从内到外一次响应。

完整代码

在线咨询

上一篇：java爬虫-网页解析Jsoup
下一篇：超简单！快速把网站生成 EXE 可执行程序

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript事件流详解

解Javascript事件流

事件冒泡

事件捕获

DOM事件流

avascript事件基础-事件流

您的项目需求