DOM事件第一彈

小龍女先生發表於2017-04-23
事件

     近期溫習了部分w3c上關於DOM事件的規範，發現以前有些模糊的概念更加清晰，以及受到羅胖（羅輯思維）的影響，很是想分享自己的瞭解的東西，希望大家給予指正或補充。

一、事件型別

引數 事件介面 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

此處為DOM2級事件，DOM3級對事件分解更加詳細，後續文章繼續整理。

二、事件物件

也就是所謂的event物件。標準瀏覽器的event物件是通過方法的引數傳入的，而ie則是window.event來獲取。現將常用的一些事件物件操作總結如下：

標準屬性或者方法名 作用 IE相容事件名
bubbles 判斷事件是否冒泡階段，true表示冒泡階段  
cancelable 指示事件是否可以取消預設動作  
target 返回觸發此事件的元素（事件的目標節點） srcElement
type 返回事件的型別  
preventDefault() 阻止預設事件的執行 returnValue為false表示
stopPropagation() 阻止事件的傳播 cancelBubble屬性為false

三、如何自定義一個事件

1. 使用document.createEvent建立一個事件。

2.通過對應的“初始化方法”初始化事件物件

3.使用dispatchEvent初始化事件

示例程式碼如下：

<input type="text" value="text" id="text" />
    <button type="button" id="btn">按鈕</button>
    <div id="foo" style="width: 200px; height: 200px; background: red;" contenteditable="true" ></div>
    <script>
        var text = document.getElementById('text');
        var foo = document.getElementById('foo');
        var btn = document.getElementById('btn');

        //自定義focus事件
        foo.onfocus = function(evt){
            evt = evt || window.event;
            console.log(evt);
            foo.innerHTML += "<br/>發生了focus事件" + ( evt.view ? 'view' : 'dispatch' );
        }
        if(document.createEvent){
            var cFocus = document.createEvent('HTMLEvents');
            //引數全是為了相容IE9+
            cFocus.initEvent('focus',true, false); 
            foo.dispatchEvent(cFocus);
        }else{
            foo.focus(); //Ie8-下會觸發兩個
        }

        //dispatch觸發按鈕事件
        
        btn.onclick = function(){
            alert('text: ' + text.value);
            text.focus();
        }
        if(document.createEvent){
            var clickHandle = document.createEvent('MouseEvents');
            //引數全是為了相容IE9+
            clickHandle.initMouseEvent('click',true,false,window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
            btn.dispatchEvent(clickHandle);
        }else{
            btn.click(); //Ie8-下也只有一次
        }

    </script>

  1. 如果是view觸發的事件，event物件上也會有view(檢視物件)和which(按的哪個鍵)，而通過dispatchEvent觸發的則沒有這兩個屬性
  2. 相容Ie8-的瀏覽器，把事件委託當作一個方法呼叫即可，如我想呼叫click事件(不帶on字首) 
    foo.click

相關文章