DOM事件

  1. 事件冒泡
    IE 的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深 的那个节点)接收，然后逐级向上传播到较为不具体的节点。

    <!DOCTYPE html>
    <html>

    <head>

        <title>Event Bubbling Example</title>

    </head>

    <body>

        <div id="myDiv">Click Me</div>

    </body>

    </html>

    　　


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

    (2) <body>

    (3) <html>

    (4) document

    　　

  2. 事件捕获
    事件捕获的思想 是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。
    如果仍以前面的 HTML 页面作为演示事件捕获的例子，那么单击

    元素就会以下列顺序触发 click 事件。
    (1) document
(2) <html>

(3) <body>

(4) <div>

    　　

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

  4. 事件处理方式：
    （1）DOM0
    每个元素(包括 window 和 document)都有自己的事件处理程序属性，这些属性通常全部小写， 例如 onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序，如下所示:

        var btn = document.getElementById("myBtn");
    btn.onclick = function(){

        alert("Clicked");

    };

    btn.onclick = null; //删除事件处理程序

     

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

    var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){

alert(this.id);

}, false);

btn.addEventListener("click", function(){

alert("Hello world!");

}, false);

     


    
添加两个，按照顺序触发

    （3）IE事件处理
    attachEvent()和 detachEvent()。这两个方法接受相同 的两个参数:事件处理程序名称与事件处理程序函数，只有冒泡。与上面的事件命不同，多一个‘on‘。添加两个，相反的顺序进行。

    btn.attachEvent("onclick", function(){
    alert("Clicked");

});

     

  5. 跨浏览器事件

     1 var EventUtil = {
 2 addHandler: function(element, type, handler){
 3 
 4     if (element.addEventListener){
 5 
 6         element.addEventListener(type, handler, false);
 7 
 8     } else if (element.attachEvent){
 9 
10         element.attachEvent("on" + type, handler);
11 
12     } else {
13 
14         element["on" + type] = handler;
15 
16     }
17 
18 },
19 
20 removeHandler: function(element, type, handler){
21 
22     if (element.removeEventListener){
23 
24         element.removeEventListener(type, handler, false);
25 
26     } else if (element.detachEvent){
27 
28         element.detachEvent("on" + type, handler);
29 
30     } else {
31 
32         element["on" + type] = null;
33 
34 } }
35 
36 };
37 
38 getEvent: function(event){
39 
40         return event ? event : window.event;
41 
42 },
43 
44     getTarget: function(event){
45 
46         return event.target || event.srcElement;
47 
48 },
49 
50     preventDefault: function(event){
51 
52         if (event.preventDefault){
53 
54             event.preventDefault();
55 
56         } else {
57 
58             event.returnValue = false;
59 
60         }
61 
62 },
63 
64 stopPropagation: function(event){
65 
66 if (event.stopPropagation){
67 
68         event.stopPropagation();
69 
70     } else {
71 
72         event.cancelBubble = true;
73 
74 } }
75 
76 };

     自定义事件

    var myEvent = new Event('event_name');
window.dispatchEvent(myEvent);
可以通过上面的事件监听

     

  6.  参考： JS高级程序设计
posted @ 2018-08-08 15:04  dfgfgf  阅读(298)  评论(0)    收藏  举报