js事件冒泡、事件捕獲和阻止預設事件詳解

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 的形式組織事件宿主的預設行為。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

一篇文章讓你徹底弄懂JS的事件冒泡和事件捕獲js事件冒泡與事件捕獲詳解JS中繫結事件順序(事件冒泡與事件捕獲區別)淺談javascript中的事件冒泡和事件捕獲JS中事件冒泡和事件捕獲介紹javaScript 事件繫結、事件冒泡、事件捕獲和事件執行順序整理總結javascript事件冒泡和事件捕獲詳解js之事件冒泡和事件捕獲詳細介紹javascript 中事件冒泡和事件捕獲機制的詳解