JS 事件（1）——事件流

事件

JavaScript与HTML之间的交互方式是通过事件来实现的。

事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。

可以用侦听器（或处理程序）来预订事件，以便在事件发生时执行相应的程序——观察员模式。

IE9、Firefox、Opera、Safari和Chrome全部已经实现了“DOM2级事件”的核心部分。

 

事件流

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

IE的事件冒泡流：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的元素。

Netscape Communicator的事件捕获流：不太具体的节点应该更早地接收到事件，而最具体的节点应该最后接收到事件。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>事件冒泡流demo</title>
 6     </head>
 7     <body>
 8         <div id="box">
 9             <input type="button" id="btn" value="button">
10         </div>
11         <script type="text/javascript">
12             var event_util = {
13                 //添加事件
14                 addHandler: function(element, type, handler) {
15                     if(element.addEventListener) {                         
16                         element.addEventListener(type, handler, false);    
17                     } else if(element.attachEvent) {                       
18                         element.attachEvent("on" + type, handler);
19                     } else {
20                         element["on" + type] = handler;                    
21                     }
22                 },
23                 //移除事件
24                 removeHandler: function(element, type, handler) {
25                     if(element.removeEventListener) {
26                         element.removeEventListener(type, handler, false);
27                     } else if(element.detachEvent) {
28                         element.detachEvent("on" + type, handler);
29                     } else {
30                         element["on" + type] = null;
31                     }
32                 }
33             };
34 
35             //依次给btn-div-body-html-document指定事件处理程序
36             function showBtn() {
37                 alert("You've clicked the button.");
38             };
39             function showDiv() {
40                 alert("You've clicked the div.");
41             };
42             function showBody() {
43                 alert("You've clicked the body.");
44             };
45             function showHtml() {
46                 alert("You've clicked the html.");
47             };
48             function showDocument() {
49                 alert("You've clicked the document.");
50             };
51 
52             //依次取得btn-div-body-html
53             var btn = document.getElementById("btn");
54             var div = document.getElementById("box");
55             var body = document.body;
56             var html = document.documentElement;
57 
58             //依次给btn-div-body-html-document添加点击事件
59             event_util.addHandler(btn, "click", showBtn);              
60             event_util.addHandler(div, "click", showDiv);              
61             event_util.addHandler(body, "click", showBody);            
62             event_util.addHandler(html, "click", showHtml);            
63             event_util.addHandler(document, "click", showDocument);    
64         </script>
65     </body>
66 </html>

如果单击了页面中的<input>元素，在冒泡流的情况下，事件会从input-div-body-html-document-(window)这样传播；而在捕获流的情况下，事件会以(window)-document-html-body-div-input这样的顺序传播。

所有现代浏览器都支持事件冒泡。

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

在事件捕获阶段，事件的传播顺序为document-html-body-div（不会涉及input）；在处于目标阶段，事件在<input>元素上发生；在事件冒泡阶段，事件冒泡，逐级向上传播。

注意：

在浏览器实现方面，IE9、Safari、Chrome、Firefox和Opera都支持事件流。

即使“OOM2级事件”规范明确要求在事件捕获阶段不会涉及事件目标，但在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在事件捕获阶段触发事件对象上的事件；也就是说，有两个机会在目标对象上操作事件。

posted @ 2016-08-04 16:01  Aaron_Xiao  阅读(330)  评论(0)    收藏  举报