事件流

描述的是從頁(yè)面中接收事件的順序。

• IE——事件冒泡流
• Netscape——事件捕獲流

事件冒泡流：即事件最開(kāi)始由具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級(jí)向上傳播至最不具體的那個(gè)節(jié)點(diǎn)（文檔）。
事件捕獲：不太具體的節(jié)點(diǎn)應(yīng)該更早接受到事件，而最具體的節(jié)點(diǎn)最后接收到事件。

使用事件處理程序

1.HTML事件處理程序
缺點(diǎn)：HTML和JS代碼緊密的耦合在一起，需要同時(shí)修改

<input type="button" value="按鈕" id="btn1" onclick='alert("hello")'/>
或封裝在一個(gè)函數(shù)內(nèi)：
<input type="button" value="按鈕2" id="btn2" onclick='showMes()'/>
<script>
    function showMes(){
        alert("hello world");
    }
</script>

2.DOM0級(jí)事件處理程序
實(shí)際上DOM0級(jí)是不存在的，DOM0級(jí)指的是IE4和網(wǎng)景4.0最初支持的DHTML
較傳統(tǒng)的方式：把一個(gè)函數(shù)賦值給一個(gè)事件的處理程序?qū)傩?/p>

<input type="button" value="按鈕3" Id="btn3" />
btn3.onclick=function(){
    alert("這是DOM0級(jí)事件處理程序");
}
//刪除事件：
btn3.onclick=null;

3.DOM2級(jí)事件處理程序
DOM2級(jí)事件定義了兩個(gè)方法：用于處理指定和刪除事件處理程序的操作addEventListener()和removeEventListener()
接收三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和布爾值（true表示事件捕獲，false表示事件冒泡，一般為false，為了兼容各種瀏覽器）

<input type="button" value="按鈕4" Id="btn4" />

var btn4=document.getElementById("btn4");
btn4.addEventListener('click',showMes2,false);
//刪除事件
btn4.removeEventListener('click',showMes2,false);

跨瀏覽器解決

初步接觸js封裝思想
有關(guān)IE兼容內(nèi)容暫時(shí)沒(méi)看

var eventUtil={
                //添加句柄
                addHandler: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;
                    }
                },
                //刪除句柄
                removeHandler:function(element,type,handler){
                    if(element.removeEventListener){
                        element.removeEventListener(type,handler,false);
                    }else if(element.detachEvent){
                        element.detachEvent('on'+type,handler);
                    }else{
                        element['on'+type]=null;
                    }
                }

            }

            eventUtil.addHandler(btn3,'click',showMes);

事件對(duì)象event

在觸發(fā)DOM上的事件時(shí)都會(huì)產(chǎn)生一個(gè)對(duì)象

1.DOM中的事件對(duì)象
（1）type屬性，用于獲取事件類型
（2）target屬性，用于獲取事件目標(biāo)
（3）stopPropagation()方法 ，用于阻止事件冒泡
（4）preventDefault()方法，阻止事件的默認(rèn)行為

function showMes(event){
    alert("event是DOM事件上的對(duì)象！");
    alert(event.target.nodeName);//event.type
    event.stopPropagation();
            }

事件冒泡與事件捕獲要是同時(shí)進(jìn)行怎么辦

我們的瀏覽器更“喜愛(ài)”事件捕獲：它會(huì)先把useCapture為false的元素綁定事件放到一邊，按照事件捕獲正常的順序執(zhí)行useCapture為true的元素綁定事件，最后在按照事件冒泡順序執(zhí)行useCapture為false。