事件流

事件流描述的是從頁面中接受事件的順序。目前有三種事件流模型：

1. IE的事件冒泡：

事件冒泡.png

事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。

2. Netscape的事件捕獲：

事件捕獲.png

不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反

3. DOM事件流：

DOM事件流.png

DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段

DOM0事件和DOM2級事件，以及一般瀏覽器和IE瀏覽器在DOM2級事件上處理的區(qū)別。

- DOM0

DOM0級事件，就是直接通過onclick等方式直接寫在HTML里面的事件。
如下

<input onclick = 'console.log("1")'>

這種處理方式具有很好的跨瀏覽器優(yōu)勢，會以最快的速度綁定，但是由于綁定速度太快，可能頁面還未完全加載出來，以至于事件可能不能正常運行。

- DOM2

主流瀏覽器DOM2級事件是通過以下兩個方法用于處理指定和刪除事件處理程序的操作：

• addEvenetListener
• removeEventListener

所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：

• 事件類型：如'click','mouseover','mouseout',在事件名前不加'on'
• 事件處理方法
• 布爾參數(shù)：不傳該參數(shù)時默認是false，表示在事件冒泡階段處理，如果是true，則表示在捕獲階段調(diào)用事件處理程序。
  如下：

<input id="showsht" type="button" value="點點點"/>

<script type="text/javascript">
var btn = document.getElementById("showsth")
btn.addEventListener('click', function(){
    console.log('出現(xiàn)了張圖片')
})

btn.addEventListener('click', showSth, false)
var shoSth = function(){
    console.log(this.id)
}
</script>

上面兩種方法中，由于第一種是使用的匿名函數(shù)，所以不能通過removeEventListener進行移除。要使用removeEventListener方法移除時，第二個參數(shù)應(yīng)該與addEventListener的第二個參數(shù)相同。
如下：

btn.removeEventListener('click', showSth, false)

IE下的DOM2事件與其他瀏覽器類似，但是由于IE瀏覽器不支持addEvenetListener和removeEventListener。
所以通過attachEvent和detachEvent來實現(xiàn)。
這兩個方法都接受兩個相同的參數(shù)：

• 事件處理函數(shù)名稱：如'onclick','onmouseover','onmouseout'，在事件名前必須加'on'
• 事件處理方法
  由于IE瀏覽器只支持事件冒泡，所以添加的程序都被添加到冒泡階段。
  如下：

<input id="showsht" type="button" value="點點點"/>

<script type="text/javascript">
var btn = document.getElementById("showsth")
btn.attachEvent('click', function(){
    console.log('出現(xiàn)了張圖片')
})

btn.attachEvent('click', showSth)
var shoSth = function(){
    console.log(this.id)
}

btn.detachEvent('click', showSth)
</script>

在運行showSth時返回的結(jié)果為undefined，這就是IE瀏覽器與其他瀏覽器的一點不同，下面會介紹到這個問題。
同樣，使用detachEvent移除事件時，不能移除使用了匿名函數(shù)的事件，第二個參數(shù)同樣應(yīng)該與attachEvent第二個參數(shù)相同。

addEventListener與attachEvent除了參數(shù)個數(shù)以及第一個參數(shù)意義不同外。還有如下兩點：

1. 事件處理程序的作用域不相同：addEventListener的作用域是元素本身，this指的是觸發(fā)元素。而attachEvent事件處理程序會在全局變量內(nèi)運行，this指的是window，所以剛才的例子返回的結(jié)果是undefined，而不是元素id。
2. 為一個事件添加多個事件處理程序時，執(zhí)行順序不同：使用addEventListener時瀏覽器會按照添加順序執(zhí)行，IE瀏覽器使用attachEvent時，如果添加的方法過多時，IE瀏覽器將不會按照順序執(zhí)行。

為了解決這四個不同點，有大師寫出了如下的處理方法：

function addEvent(node, type, handler) {
    if(!node) return false;
    if(node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if(node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

取消事件處理：

function removeEvent(node, type, handler) {
    if(!node) return false;
    if(node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if(node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node.[type + handler] = null;
    }
    return false;
}

阻止事件冒泡與阻止默認事件

阻止事件冒泡

使用stopPaopagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡。
如下：

var showSth = function (e) {
    alert.(e.type)
    e.stopPropagation();
}

阻止默認事件

使用preventDefault()方法可以阻止事件的默認行為，如下，我們可以阻止a鏈接導(dǎo)航這一默認行為：

document.getElemenById('nowork').onclick = function (e) {
    e.preventDefault();
}