javascript事件冒泡和事件捕获类型
js与HTML之间的交互是通过事件实现。
事件流:
事件是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件流,描述的是页面中接受事件的顺序。
IE9,chrome,Firefox,Opera,Safari实现DOM2级规范中定义的标准DOM事件,IE8和IE8以下版本仍然保留专有的事件处理方式。
(1).事件冒泡:
事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> #myDiv{ width:100px; height:100px; background-color:#FF0000; } </style> <body> <div id="myDiv"></div> </body> </html>
当用户点击<div>元素,click事件将按照<div>—><body>—><html>—>document的顺序进行传播。
若在<div>和<body>上都定义了click事件,如下 :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> #myDiv{ width:100px; height:100px; background-color:#FF0000; } </style> <script type="text/javascript"> window.onload=function(){ var div=document.getElementById("myDiv"); div.onclick=function(event){ alert("div"); }; document.body.onclick=function(event){ alert("body"); }; } </script> <body> <div id="myDiv"></div> </body> </html>
点击<div>,将先输出“div”,再输出“body”。
IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。
(2).事件捕获:
事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。
当用户点击了<div>元素,采用事件捕获,则click事件将按照document—><html>—><body>—><div>的顺序进行传播。
若在<div>和<body>上都定义了click事件,如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> #myDiv{ width:100px; height:100px; background-color:#FF0000; } </style> <script type="text/javascript"> window.onload=function(){ var div=document.getElementById("myDiv"); div.addEventListener("click",function(event){ alert("div"); },true); document.body.addEventListener("click",function(event){ alert("body"); },true); } </script> <body> <div id="myDiv"></div> </body> </html>
点击<div>,将先输出“body”,再输出“div”。
IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。
尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。
(3).DOM事件流:
"DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。以上面的HTML页面为例,单击<div>元素将按照下图触发事件:
若在<div>和<body>上都定义了click事件,如下:
var div=document.getElementById("myDiv"); div.onclick=function(event){ alert("div"); }; document.body.addEventListener("click",function(event){ alert("event bubble"); },false); document.body.addEventListener("click",function(event){ alert("event catch"); },true);
点击<div>,将先输出“event catch”,再输出“div”,最后输出“event bubble”。