js事件冒泡、事件捕獲和阻止默認事件詳解

談起JavaScript的事件，事件冒泡、事件捕獲、阻止默認事件這三個話題，無論是面試還是在平時的工作中，都很難避免。

1.事件冒泡

先來看一段代碼：

 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“，因為阻止了事件冒泡。

2.事件捕獲

既然有事件的冒泡，也可以有事件的捕獲，這是一個相反的過程。區別是從頂層元素到目標元素或者從目標元素到頂層元素。

來看一段代碼：

 $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"，這就是事件的捕獲。

3.阻止默認事件

有一些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://keleyi.com">柯樂義</a>默認事件沒有了。

既然return false 和e.preventDefault()都是一樣的效果，那它們有區別嗎？當然有。

僅僅是在HTML事件屬性和DOM0級事件處理方法中才能通過返回return false 的形式組織事件宿主的默認行為。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。