DOM事件

2018-08-10 11:21:17来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  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高级程序设计
    

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javascript中string对象方法中的slice、substring、substr的区别

下一篇:如何将在线电子书保存为pdf格式