js事件處理、事件對象

事件類型分類：

1 添加在html結構中的事件

<div id="div1" onclick="alert('append click event in html')"> </div>

點擊div1之后彈出 append click event in html；其實在html結構中添加的事件也屬於dom0級事件。

2 dom0級事件處理

<div id="div1"> </div>
<script>
    var dom1 = document.getElementById('div1'); dom1.onclick = function(){alert(' first dom0 ')}; dom1.onclick = function(){alert(' second dom0 ')};
</script>

點擊div1之后只彈出 second dom0；說明dom0級事件后面賦值的事件會覆蓋掉前面的

如果在div中在加 onclick="alert('append click event in html'), 代碼如下：

<div id="div1" onclick="alert('append click event in html')"> </div>
<script>
    var dom1 = document.getElementById('div1'); dom1.onclick = function(){alert(' first dom0 ')}; dom1.onclick = function(){alert(' second dom0 ')}; </script>

點擊div后 仍然只彈出second dom0， 說明在html中添加的點擊事件處理程序也被覆蓋。

實際上 dom1.onclick 等價於html結構中div標簽中的onclick=""; 可以把onclick看成dom元素對象的一個屬性 dom1{ id："1", onclick：function(){ ... } }

3 dom2級事件處理

dom.addEventListener（“事件名”，“事件處理程序”，“布爾值”）

布爾值表示該事件的響應順序,默認值為false。

true：事件捕獲：表示在捕獲階段調用事件處理程序。

false：事件冒泡：表示在冒泡階段調用事件處理程序。
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在 冒泡 中，內部元素的事件會先被觸發，然后再觸發外部元素，即： <p> 元素的點擊事件先觸發，然后會觸發 <div> 元素的點擊事件。
在 捕獲 中，外部元素的事件會先被觸發，然后才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然后再觸發 <p> 元素的點擊事件。

 

關於事件冒泡和捕獲在后面再舉出實例代碼。

使用addEventListener添加事件不會被覆蓋也不會覆蓋dom0級事件，如下：

<div id="div1" onclick="alert('append click event in html')"> </div>
<script>
    var dom1 = document.getElementById('div1'); var handle = function () { alert('dom2 event handle'); }; dom1.onclick = function(){alert(' first dom0 ')}; dom1.onclick = function(){alert(' second dom0 ')}; dom1.addEventListener("click", function(){alert(' first dom2 ')}, false); dom1.addEventListener("click", handle, false); </script>

點擊div1時彈出 second dom0、first dom2 、dom2 event handle ，dom0級綁定的最后一個事件覆蓋了前面所有的dom0級事件，而綁定的兩個dom2級事件都存在,並且先執行dom0級事件在執行dom2級事件。

 

使用removeEventListener移除事件，傳入的參數與添加處理程序時addEventListener使用的參數相同。

這也意味着事件處理程序為匿名函數的無法移除，如下所示：

<div> </div>
<script>
    var dom1 = document.getElementById('div1'); var handle = function () { alert('event handle'); }; dom1.addEventListener("click", function(){alert(' first dom2 ')}, false); dom1.addEventListener("click", function(){alert(' second dom2 ')}, false); dom1.addEventListener("click", handle, false); dom1.removeEventListener("click", handle, false);
 dom1.removeEventListener("click", function(){alert(' second dom2 ')}, false); </script>

點擊div1依次彈出 first dom2 、second dom2

關於事件冒泡和捕獲的代碼實例：

<div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div>
<script>
    var html = document.getElementsByTagName('html')[0]; var body = document.getElementsByTagName('body')[0]; var dom1 = document.getElementById('div1'); var dom2 = document.getElementById('div2'); var dom3 = document.getElementById('div3'); var dom4 = document.getElementById('div4'); window.addEventListener("click", function(){alert('window')}, false); document.addEventListener("click", function(){alert('document')}, true); html.addEventListener("click", function(){alert('html')}, false); body.addEventListener("click", function(){alert('body')}, true); dom1.addEventListener("click", function(){alert('div1')}, false); dom2.addEventListener("click", function(){alert('div2')}, true); dom3.addEventListener("click", function(){alert('div3')}, false); dom4.addEventListener("click", function(){alert('div4')}, false); // addEventListen 添加的第三個參數true則是事件捕獲,不添加或false則為事件冒泡， 由事件源dom4元素 --> 父元素dom3 --> 爺爺元素dom2 --> ... --> body --> html --> document --> window 執行事件處理程序
    // 若從事件源dom4元素到window 有存在事件捕獲的綁定事件 ，則事件從window到事件源dom4 依次執行完設置為true的捕獲事件 在從事件源dom到window執行完其他未設置為true的冒泡事件。
    //如上述代碼 依次彈出 document body div2 div4 div3 div1 html window
</script>

注意：IE8及更早IE版本，Opera7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。

對於這類瀏覽器版本可以使用 attachEvent() 方法來添加事件，detachEvent() 方法來移除事件句柄

 

事件對象：在觸發dom事件的時候都會產生一個事件對象

 

事件對象event：

1） type：獲取事件類型

2） target：獲取事件目標

3） stopPropagation（）：阻止事件冒泡

4） preventDefault（）：阻止事件默認行為

<div id="div1"> </div>
<script>
    var dom1 = document.getElementById('div1'); dom1.addEventListener("click",function(event){console.log(event.type);console.log(event.target)}) </script>

 console.log 輸出： click , <div id="div1"> </div>

<div><a></a></div>
<script> dom_div.addEventListener("click",fun_div) dom_a.addEventListener("click",fun_a) </script>

點擊a時觸發fun_a 由於事件冒泡再觸發fun_div  

在fun_a的末尾添加event.stopPropagation（）：阻止事件冒泡 則div中的click事件fun_div無效

 

<a href="http://www.baidu.com"></a>

dom_1.addEventListener("click",function(event){}) 點擊之后a會跳轉到百度 在回調函數function中添加event.preventDefault（）;阻止事件默認行為 點擊之后不會跳轉