事件類型分類：

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標簽中的οnclick=""; 可以把onclick看成dom元素對象的一個屬性 dom1{ id："1", onclick：function(){ ... } }

3 dom2級事件處理

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

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

true：事件捕獲：表示在捕獲階段調用事件處理程序。 false：事件冒泡：表示在冒泡階段調用事件處理程序。
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發(fā)的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發(fā)呢？
在 冒泡 中，內部元素的事件會先被觸發(fā)，然后再觸發(fā)外部元素，即： <p> 元素的點擊事件先觸發(fā)，然后會觸發(fā) <div> 元素的點擊事件。
在 捕獲 中，外部元素的事件會先被觸發(fā)，然后才會觸發(fā)內部元素的事件，即： <div> 元素的點擊事件先觸發(fā) ，然后再觸發(fā) <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級事件都存在,并且先執(zhí)行dom0級事件在執(zhí)行dom2級事件。 ? 使用removeEventListener移除事件，傳入的參數(shù)與添加處理程序時addEventListener使用的參數(shù)相同。 這也意味著事件處理程序為匿名函數(shù)的無法移除，如下所示： <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 添加的第三個參數(shù)true則是事件捕獲,不添加或false則為事件冒泡， 由事件源dom4元素 --> 父元素dom3 --> 爺爺元素dom2 --> ... --> body --> html --> document --> window 執(zhí)行事件處理程序// 若從事件源dom4元素到window 有存在事件捕獲的綁定事件 ，則事件從window到事件源dom4 依次執(zhí)行完設置為true的捕獲事件 在從事件源dom到window執(zhí)行完其他未設置為true的冒泡事件。//如上述代碼 依次彈出 document body div2 div4 div3 div1 html window </script>

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

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

? 事件對象：在觸發(fā)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時觸發(fā)fun_a 由于事件冒泡再觸發(fā)fun_div ? 在fun_a的末尾添加event.stopPropagation（）：阻止事件冒泡 則div中的click事件fun_div無效 ? <a href="http://www.baidu.com"></a> dom_1.addEventListener("click",function(event){}) 點擊之后a會跳轉到百度 在回調函數(shù)function中添加event.preventDefault（）;阻止事件默認行為 點擊之后不會跳轉 ?

轉載于:https://www.cnblogs.com/peakleo/p/6090385.html

總結

以上是生活随笔為你收集整理的js事件处理、事件对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。