JavaScript事件冒泡、事件捕獲和阻止預設事件
談起JavaScript的 事件,事件冒泡、事件捕獲、阻止預設事件這三個話題,無論是面試還是在平時的工作中,都很難避免。
冒泡篇
先來看一段例項:
js:
var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("body")[0]; $input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") } $div.onclick = function(e){ this.style.border = "5px solid green" alert("green") } $body.onclick = function(e){ this.style.border = "5px solid yellow" alert("yellow") }
html:
<div> <input type="button" value="測試事件冒泡" /> </div>
依次彈出”red“,”green”,”yellow”。
你的本意是觸發button這個元素,卻連同父元素繫結的事件一同觸發。這就是事件冒泡。
如果對input的事件繫結改為:
$input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") e.stopPropagation(); }
這個時候只會彈出”red“
因為阻止了事件冒泡。
捕獲篇
既然有事件的冒泡,也可以有事件的捕獲,這是一個相反的過程。區別是從頂層元素到目標元素或者從目標元素到頂層元素。
來看程式碼:
$input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red") }, true) $div.addEventListener("click", function(){ this.style.border = "5px solid green"; alert("green") }, true) $body.addEventListener("click", function(){ this.style.border = "5px solid yellow"; alert("yellow") }, true)
這個時候依次彈出”yellow“,”green”,”red”。
這就是事件的捕獲。
如果把addEventListener方法的第三個引數改成false,則表示只在冒泡的階段觸發,彈出的依次為:”red“,”green”,”yellow”。
阻止預設事件篇
有一些html元素預設的行為,比如說a標籤,點選後有跳轉動作;form表單中的submit型別的input有一個預設提交跳轉事件;reset型別的input有重置表單行為。
如果你想阻止這些瀏覽器預設行為,JavaScript為你提供了方法。
先上程式碼
var $a = document.getElementsByTagName("a")[0]; $a.onclick = function(e){ alert("跳轉動作被我阻止了") e.preventDefault(); //return false;//也可以 } <a href="http://www.nipic.com">暱圖網</a>
預設事件沒有了。
既然return false 和 e.preventDefault()都是一樣的效果,那它們有區別嗎?當然有。
僅僅是在HTML事件屬性 和 DOM0級事件處理方法中 才能通過返回 return false 的形式組織事件宿主的預設行為。
注意:以上都是基於W3C標準,沒有考慮到IE的不同實現。
更多關於JavaScript事件的學習,建議大家有可以閱讀這篇文章:編寫高效能的JavaScript事件
相關文章
- javascript事件冒泡和事件捕獲型別JavaScript事件型別
- 事件冒泡 和 事件捕獲事件
- JS事件(事件冒泡和事件捕獲)JS事件
- JavaScript事件捕獲冒泡與捕獲JavaScript事件
- JavaScript阻止冒泡和取消事件預設行為JavaScript事件
- JavaScript高階程式設計筆記 事件冒泡和事件捕獲JavaScript程式設計筆記事件
- JavaScript阻止事件冒泡JavaScript事件
- 關於js事件冒泡和事件捕獲JS事件
- 理解js的事件冒泡和事件捕獲JS事件
- Javascript中的事件冒泡與捕獲JavaScript事件
- javascript的事件監聽與捕獲和冒泡JavaScript事件
- 阻止冒泡和阻止預設事件的相容寫法事件
- javascript阻止事件冒泡程式碼JavaScript事件
- jQuery阻止事件冒泡和預設行為程式碼jQuery事件
- 事件的捕獲、冒泡、委託事件
- JavaScript 事件捕獲JavaScript事件
- JS中的事件順序(事件捕獲與冒泡)JS事件
- jquery阻止事件冒泡jQuery事件
- Javascript事件模型系列(二)事件的捕獲-冒泡機制及事件委託機制JavaScript事件模型
- 阻止事件冒泡(stopPropagation和cancelBubble)和阻止預設行為(preventDefault和returnValue)事件
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- stopPropagation() 阻止事件冒泡事件
- jQuery如何阻止事件冒泡jQuery事件
- JavaScript 事件冒泡JavaScript事件
- 原生js如何阻止事件冒泡JS事件
- 事件冒泡、事件捕獲、DOM0級事件處理程式、DOM2級事件處理程式事件
- 原生javascript的return false並不能阻止事件冒泡JavaScriptFalse事件
- 阻止游標預設事件事件
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- javascript事件捕獲是什麼意思JavaScript事件
- Spirit帶你徹底瞭解事件捕獲和冒泡機制事件
- js阻止事件冒泡例項程式碼JS事件
- jQuery阻止事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡簡單介紹jQuery事件
- 阻止jquery事件冒泡程式碼例項jQuery事件
- jQuery阻止事件冒泡例項程式碼jQuery事件
- 阻止瀏覽器冒泡事件,相容firefox和ie瀏覽器事件Firefox
- jQuery學習筆記02--讀取和操作屬性,讀取和操作屬性節點,新增、刪除、改變類,操作html、css、value,操作事件,事件冒泡及阻止事件冒泡,預設行為及阻止預設行為,自動觸發事件jQuery筆記HTMLCSS事件