JavaScript事件冒泡、事件擷取和封鎖預設事件程式碼範例-js教程-PHP中文網

JavaScript事件冒泡、事件擷取和封鎖預設事件程式碼範例

黄舟

發布： 2017-03-15 17:24:44

原創

1450 人瀏覽過

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

冒泡篇

先來看一段實例：

js:

var $input = document.getElementsByTagName("input")[0];
        var $p = document.getElementsByTagName("p")[0];
        var $body = document.getElementsByTagName("body")[0];

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

登入後複製

html:

<p>
        <input type="button" value="测试事件冒泡" />
    </p>

登入後複製

依序彈出」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)
$p.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事件冒泡、事件擷取和封鎖預設事件程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！