DOM0,DOM2,DOM3事件,事件基礎知識入門 - diligenceday－IT工程師數位筆記本

文章出處

　　事件是javascript和HTML交互基礎, 任何文檔或者瀏覽器窗口發生的交互, 都要通過綁定事件進行交互;
　　事件有DOM0, DOM2和DOM3的區分(別問我怎么少了一個DOM1, 也沒找到DOM1的信息啊,);

　　DOM0就是直接通過 onclick寫在html里面的事件, 比如:

<input onclick="alert(1)" />

　　DOM2是通過addEventListener綁定的事件, 還有IE下的DOM2事件通過attachEvent綁定;
　　DOM3是一些新的事件, 區別DOM3和DOM2的方法我感覺是DOM3事件有分大小寫的,DOM2沒有;

　　事件流(現在很流行偷圖么么噠)
　　
　　IE的事件流是冒泡, 從里面往上面冒, netscape是從外部元素往內部元素捕獲;
　　而DOM2級的事件規定了事件流包含三個階段包括： 1：事件捕獲， 2：處于目標階段， 3：事件冒泡階段（IE8以及更早版本不支持DOM事件流）;

　　DOM0事件
　　

<input onclick="alert(event)" />
<form>
<input name="hehe" value="hehe" />
<input onclick="alert(hehe.value)">
所有DOM0的事件作用域被擴展了哇;

</form>

　　DOM0的事件具有極好的跨瀏覽器優勢, 會以最快的速度綁定, 如果你通過DOM2綁定要等到JS運行, DOM0不用, 因為DOM0是寫在元素上面的哇;

　　DOM2事件

　　DOM2事件的冒泡和捕獲

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <meta charset="utf-8" />
            <style type="text/css">
                #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
                #c { width: 100px; height: 100px; border: 1px solid red; }
            </style>
        </head>
        <body>
        <div id="p">
            parent
            <div id="c">
                child
            </div>
        </div>
        <script type="text/javascript">
            var p = document.getElementById('p'),
                    c = document.getElementById('c');
            c.addEventListener('click', function () {
                alert('子節點捕獲')
            }, true);

            c.addEventListener('click', function (e) {
                alert('子節點冒泡')
            }, false);

            p.addEventListener('click', function () {
                alert('父節點捕獲')
            }, true);

            p.addEventListener('click', function () {
                alert('父節點冒泡')
            }, false);
        </script>
        </body>
        </html>

　　這個依次會打出父節點捕獲,子節點捕獲,子節點冒泡和父節點冒泡,(注意：如果你在目標元素上改變綁定事件的順序, 這些事件可能就不按照捕獲和冒泡的順序來了，而是根據捕獲和冒泡的順序進行觸發 , 這個有解決方法,參考:) ==>>(葉小釵的東東)http://www.cnblogs.com/yexiaochai/p/3567597.html );

　　捕獲的事件是按照順序執行的, 而冒泡的事件在有的瀏覽器中的按照順序執行有的按照相反的順序執行;
　　說實話啊，事件捕獲沒啥用處么么噠;

　　還有一點要注意的是：元素點擊里面的this有問題哦, 在IE8和和IE8以前, 通過attachEvent綁定的事件里面的this是window;

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <meta charset="utf-8" />
            <style type="text/css">
                #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
            </style>
        </head>
        <body>
        <div id="p">
            p
        </div>
        <script type="text/javascript">
            var p = document.getElementById('p');
            p.attachEvent("onclick",function(){
                alert(this);
            })
            //在IE5678這個彈出的是window哦,這個要主要, 要讓this 指向這個元素通過apply或者call改變上下文
        </script>
        </body>
        </html>

　　chrome下有個getEventListeners可以獲取元素綁定事件，從小釵哪里抄的,代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
<div id="d">ddssdsd</div>
  <script type="text/javascript">
    var node = document.getElementsByTagName('*');
    var d = document.getElementById('d');
    d.addEventListener('click', function () {
      alert();
    }, false);
    d.addEventListener('click', function () {
      alert('我是第二次');
    }, false);
    d.onclick = function () {
      alert('不規范的綁定');
    }
    d.addEventListener('click', function () {
      alert();
    }, true);

    d.addEventListener('mousedown', function () {
      console.log('mousedown');
    }, true);
    var evets = typeof getEventListeners == 'function' && getEventListeners(d);
    getEventListeners(d)
  </script>
</body>
</html>

　　這個兼容問題常見的解決方法，一般來說夠用了：

    <script>
     var eventUtil = {
        add : function(el, type, handler) {
            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on"+type, handler);
            }else{
                el["on"+type] = handler;
            }
        },
        off : function(el, type, handler) {
            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on"+type] = null;
            }
        }
     };
    </script>

　　事件對象

　　無論在DOM0還是DOM2還是DOM3中都會在事件函數中傳入事件對象;

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
        </style>
    </head>
    <body>
    <div id="p">
        p
    </div>
    <script type="text/javascript">
        var p = document.getElementById('p');
        p.addEventListener("click",function(){
            console.log(arguments[0]);
        })
    </script>
    </body>
    </html>

　　事件對象event下的屬性和方法：

    因為各個瀏覽器的事件對象不一樣, 把主要的時間對象的屬性和方法列出來;
    bubble ：    表明事件是否冒泡
    cancelable ：  表明是否可以取消冒泡
    currentTarget ： 當前時間程序正在處理的元素, 和this一樣的;
    defaultPrevented： false ，如果調用了preventDefualt這個就為真了;
    detail： 與事件有關的信息(滾動事件等等)
    eventPhase： 如果值為1表示處于捕獲階段， 值為2表示處于目標階段，值為三表示在冒泡階段
    target || srcElement： 事件的目標
    trusted： 為ture是瀏覽器生成的，為false是開發人員創建的（DOM3）
    type ： 事件的類型
    view ： 與元素關聯的window， 我們可能跨iframe；
    preventDefault()    取消默認事件；
    stopPropagation() 取消冒泡或者捕獲；
    stopImmediatePropagation() (DOM3)阻止任何事件的運行；
    //stopImmediatePropagation阻止 綁定在事件觸發元素的 其他同類事件的callback的運行

    IE下的事件對象是在window下的，而標準應該作為一個參數, 傳為函數第一個參數;
    IE的事件對象定義的屬性跟標準的不同，如：
    cancelBubble 默認為false, 如果為true就是取消事件冒泡;
    returnValue 默認是true，如果為false就取消默認事件;
    srcElement, 這個指的是target, Firefox下的也是srcElement;

　　小胡子的事件解惑：打開

　　葉小釵的事件入門：打開

文章列表