JAVASCRIPT高级程序设计_10_事件流和事件对象

Posted on 2018-02-28 13:08  Jonathan_C  阅读(105)  评论(0)    收藏  举报
  • 事件冒泡和事件捕获

  1. IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Event</title>
 6 </head>
 7 <body>
 8     <div>Event Bubble</div>
 9 </body>
10 </html>

　　 冒泡顺序从div开始，div-->body-->html-->document

　　 2. 事件捕获（event capture）是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

　　 上述代码事件捕获的顺序式: document-->html-->body-->div

　　 3. DOM事件流：包括事件捕获，处于目标阶段和事件冒泡。首先发生事件捕获，之后目标接收到事件，最后事件冒泡。整体算下来，就有两个机会在目标对象上操作对象。

  •  DOM0级事件，HTML 指定事件处理程序和JS指定事件处理程序。
1     <!--HTML事件处理程序-->
2     <input type="button" name="" value="click" onclick="alert(value)">
1             var button=document.getElementById('myButton');
2             button.onclick=function(){
3             alert("clicked");
4             }    //JS指定事件处理程序
  • DOM2级事件： addEventListener（）和removeEventListener( )，它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

　　1. 布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

1             //DOM2级事件
2             var button_2=document.getElementById('myButton_2');
3             button_2.addEventListener('click',function(){
4                 alert("addEventListener"),false})

　　2 removeEventListener() 方法必须传入addEventListener()中函数名相同的参数。

1 var btn = document.getElementById("myBtn");
2 var handler = function(){
3     alert(this.id);
4 };
5 btn.addEventListener("click", handler, false);
6 
7 btn.removeEventListener("click", handler, false); //有效！
  • IE中的attachEvent和detachEvent与DOM0级中的处理方法类似，只是作用域不同。事件处理程序会在全局作用域中运行。

 

  • 事件对象
1             button.onclick=function(event){
2                 alert("clicked");
3             }

　　function传入的参数默认有一个event对象

  1. event.target对象为事件的目标
  2. event.type被触发的事件类型
 1             //事件对象
 2             var btn=document.getElementById('btn');
 3             var handler=function(event){
 4                 switch(event.type){
 5                     case "click":
 6                     alert('click');
 7                     break;
 8 
 9                     case "mouseover":
10                     event.target.style.backgroundColor='red';
11                     break;
12 
13                     case "mouseout":
14                     event.target.style.backgroundColor='';
15                     break;
16                 }
17             }
18             btn.onclick=handler;
19             btn.onmouseover=handler;
20             btn.onmouseout=handler;
21         }

　　3.  要阻止特定事件的默认行为，可以使用preventDefault()方法

1 var link = document.getElementById("myLink");
2 link.onclick = function(event){
3     event.preventDefault();
4 };

　　防止点击Link后的自动跳转。

　　4. stopPropagation()方法用于立即停止事件在DOM 层次中的传播，即取消进一步的事件捕获或冒泡

1             //stopPropagation
2             var btn_2=document.getElementById('btn_2');
3             btn_2.onclick=function(event){
4                 alert('stop here');
5                 event.stopPropagation();
6             };
7             document.body.onclick=function(event){
8                 alert("not show");
9             }

　　只出现stop here，not show就不会出现。

　　5. EventPhase作为事件属性，用于确定事件在事件流的哪个阶段。如果处于捕获阶段，那么eventPhase=1, 如果处于目标对象上，那么eventPhase=2,如果处于冒泡阶段，那么eventPhase=3

　　　　只有在事件处理程序执行期间，event 对象才会存在；一旦事件处理程序执行完成，event 对象就会被销毁

　　6. 对于IE中的事件，stopPropagation（）能取消事件冒泡和捕获

　　7. 跨浏览器事件对象，通过创建eventUtil对象来实现。