首頁 > 開發者 > JavaScript
標籤：form 為什麼 margin java func pre 冒泡 target 好的
JavaScript事件中有非常重要的特性——事件冒泡：閑話少說，讓我們通過例子來說明一切觀察下面的代碼：<div onclick="alert(‘The handler!‘)"> <em> If you click on <code>EM</code>, the handler on <code>DIV</code> runs </em></div>不管我們點擊<div>、<em>或<code>時，都會觸發click事件。 為什麼我們點擊的是em或code節點會觸發div的click事件？其實這就是冒泡的特性，冒泡的原理很簡單。我們再看一段代碼：
<style>body * {margin: 10px;border: 1px solid blue;}</style><form onclick="alert(‘form‘)">FORM<div onclick="alert(‘div‘)">DIV<p onclick="alert(‘p‘)">P</p></div></form>如果我們點擊 P ，瀏覽器會依次執行alert(‘p‘); alert(‘div‘); alert(‘form‘)。 這說明，當觸發某個節點上的事件時，它首先會執行自己的事件，然後會找到自己父級div的事件，再到Form,最終這個事件會“冒泡”到水面，即它的祖先即document對象。
這個處理的過程 就叫“冒泡”，就像水裡的泡泡，是由下而上的。 注意：並不是所有的事件都有“冒泡”，例如focus等。 event.target 與 this的區別： event.target:是尋找發起事件的“目標”元素，在冒泡的過程中它是不會被改變的。this ：指的是當前元素例如：如果我們有一個form.onclick的函數，它可以捕捉form內的所有點擊事件，別管這個點擊事件在form哪裡觸發，它都會冒泡到form這一層並且執行這個onclick函數。在form.onclick函數裡，this(=event.currentTarget)指的是<form>表單，因為這個event.target 指的是實際被點擊到的表單中的元素。 看看下面這個例子，從這個例子可以更好的理解this與event.target的區別。
form.onclick = function(event) {event.target.style.backgroundColor = ‘yellow‘;// chrome needs some time to paint yellowsetTimeout(() => {alert("target = " + event.target.tagName + ", this=" + this.tagName);event.target.style.backgroundColor = ‘‘}, 0);};this.tagName：指的是FORMevent.target.tagName:指的是我們點擊的哪個元素。
阻止冒泡通常來講，冒泡事件會從目標元素一直上升到<html>, 然後達到document對象，一些事件會達到window，並會調用“上升過程中”所有的對應的函數。so,如何阻止冒泡呢？使用：event.stopPropagation()
<body onclick="alert(`the bubbling doesn‘t reach here`)"><button onclick="event.stopPropagation()">Click me</button></body>
點擊Click me按鈕時，body是不會有alert的動作。 event.stopImmediatePropagation()如果一個元素上綁定了多個事件處理，我們使用stopPropagation停止掉其中一個冒泡，但是其他的冒泡仍在執行。為了阻止當前元素及綁定事件的冒泡，需要使用event.stopImediatePropagation()函數。 注意：通常沒有必要去阻止泡沫的發生。一般的情況可以通過其他方式來解決。例如利用自訂事件或者可以將資料寫入到事件的對象中。
JavaScript事件冒泡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
