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

冒泡篇

先來看一段實例：

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”。

你的本意是觸發(fā)button這個元素，卻連同父元素綁定的事件一同觸發(fā)。這就是事件冒泡。

如果對input的事件綁定改為：

$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}

這個時候只會彈出”red“

因為阻止了事件冒泡。

捕獲篇

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

來看代碼：

$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”。

這就是事件的捕獲。

如果把a(bǔ)ddEventListener方法的第三個參數(shù)改成false，則表示只在冒泡的階段觸發(fā)，彈出的依次為：”red“,”green”,”yellow”。

阻止默認(rèn)事件篇

有一些html元素默認(rèn)的行為，比如說a標(biāo)簽，點擊后有跳轉(zhuǎn)動作；form表單中的submit類型的input有一個默認(rèn)提交跳轉(zhuǎn)事件；reset類型的input有重置表單行為。

如果你想阻止這些瀏覽器默認(rèn)行為，JavaScript為你提供了方法。

先上代碼

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
    alert("跳轉(zhuǎn)動作被我阻止了")
    e.preventDefault();
    //return false;//也可以
}

<a >昵圖網(wǎng)</a>

默認(rèn)事件沒有了。

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

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

注意：以上都是基于W3C標(biāo)準(zhǔn)，沒有考慮到IE的不同實現(xiàn)。

更多關(guān)于JavaScript事件的學(xué)習(xí)，建議大家有可以閱讀這篇文章：編寫高性能的JavaScript事件

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。