javascript的事件

去年一直在學習框架的東西，好比VueJs,angularJs的東西，但感受本身的基礎知識仍是很匱乏，所以想着該從新迴歸本質，多看看原生javascrip的東西，如今返回去學一些東西，感受不少都豁然開朗的感受。

所謂事件呢，就是能夠被 JavaScript 偵測到的行爲。而具體的事件有哪些呢

• 鼠標事件

• 鍵盤事件

• window事件

• media事件

• form事件

當觸發事件時，就須要去處理他，而使用事件處理模型有三種

• html事件處理模型----定義：將事件直接綁定到html標籤上----缺點：html和javascript耦合，沒法處理多個事件程序

<input id="btn" value="按鈕" type="button" onclick="showMessage();">
<script>
　function showMessage(){
　　 console.log("HTML添加事件處理");
　}
</script>

. DOM0級事件處理模型----定義:函數賦值給事件處理程序的方法

var btn=document.getElementById('btn');

 btn.onclick=function(){

 console.log('這是經過DOM 2級處理程序')

};

. DOM 2級事件處理程序----經過addEventListener 和 removeEventListener,這兩個函數的參數要一致

function showMsg(){
console.log('msg')
}
btn.addEventListener('click', showMsg, false)
btn.removeEventListener('click', showMsg, false)

IE事件處理
IE8如下的版本不支持addEventListener
所以須要用attachEvent 添加事件處理程序

detachEvent 刪除事件處理程序

而事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所通過的全部節點都會收到該事件，這個傳播過程即DOM事件流。

事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件捕獲：不太具體的DOM節點，具體節點接收到事件

事件冒泡：由具體的DOM節點逐級向上傳遞至最不具體的節點

網上的圖片更形象的代表了

<div id='box'>
        <div id='father'>
            <div id='son'></div>
        </div>
    </div>
    <script>
        var box=documentGetById('box'),
            father=document.getElementById('father'),
            son=document.getElementById('son');
        father.addEventListener('click',function(){
            console.log('father msg');
        },false)    
        son.addEventListener('click',function(){
            console.log('son msg')
        },false)
    </script>

當咱們點擊son的時候，控制檯會前後打出

som msg
father msg

但是咱們只想顯示son msg，應該怎麼處理呢 ，接着往下看

DOM中的事件對象

在觸發DOM上的事件時都會產生一個對象 
DOM中的 event事件對象
     type:事件類型，
     target:獲取事件目標元素
     stopPropagation:方法 阻止事件冒泡
     preventDefault 方法 阻止事件的默認行爲
IE中的事件對象
    type:事件類型
    srcElement 屬性 獲取事件目標元素
    cancleBubble 屬性
    returnValue 屬性 設置爲true

經過以上知識，咱們能夠封裝一個跨瀏覽器的事件對象

var eventObj= {
         /**
         * 添加事件 
         * element 元素
         * 事件類型
         * 事件處理
         **/
        addEventHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler)
            } else {
                element['on' + type] = handler;
            }
        },
        /**
        * 移除事件
        * element 元素
        * 事件類型
        * 事件處理
        **/
        removeEventHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler)
            } else {
                element['on' + type] = null;
            }
        },
        /**
        *獲取事件
        **/
        getEvent: function (e) {
            return e ? e : window.event;
        },
        /**
        * 阻止默認行爲
        **/
        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }
        },
        getElement: function (e) {
            return e.target || e.srcElement;
        },
        /** 
        * 阻止事件冒泡
        **/
        stopPropagation: function (e) {
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }

        }
    };
    eventUtil.addHandler(btn2, 'click', showMessage);