JavaScript中的事件冒泡
[英]Event bubbling in JavaScript
問題描述
關於冒泡的定義，我似乎無法理解。
我知道事件冒泡意味着事件從內部元素傳播到外部元素。 我也知道，您可以使用addEventListener（）的最后一個可選參數“選擇”傳播方式。
我不明白的是這一件事：
<body>
<div id = "divi">
<p id = "para">Paragraph</p>
</div>
<script>
var elementd = document.getElementById('divi');
elementd.addEventListener("click", MessageD);
function MessageD(){
alert('A message');
}
</script>
</body>
在這里，我將click事件附加到了div元素上。 默認情況下，click事件是冒泡的，這意味着他正在瀏覽DOM。 但是，當我單擊段落時，將執行click事件。
據我了解，這意味着click事件首先傳播到“ p”子元素，或者傳播到DOM。 有人可以向我解釋為什么以及會發生什么嗎？ 謝謝！
---在某些答案后進行編輯---
也許通過這個例子可以更好地解釋困擾我的事情：
<body>
<style>
#myDiv, #results {
margin: 50px;
}
#myDiv {
padding: 10px;
width: 200px;
text-align: center;
background-color: #000;
}
#myDiv div {
margin: 10px;
background-color: #555;
}
</style>
<div id="myDiv">
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
</div>
<div id="results"></div>
<script>
var myDiv = document.getElementById('myDiv'),
results = document.getElementById('results');
myDiv.addEventListener('mouseover', function() {
results.innerHTML += "I'm in.<br />";
}, false);
myDiv.addEventListener('mouseout', function() {
results.innerHTML += "I'm out.<br />";
}, false);
</script>
</body>
如果嘗試運行此代碼，則每次進入和退出子div時都將處於“出”和“入”狀態……這意味着您將在子div中處於“入”狀態。
這是否意味着事件從父級傳播到子級或向下傳播？
---最終編輯---我終於明白了：我在事件和事件處理程序之間造成了混亂。
事件只是一個點擊，因此頁面中的任何內容都可以接收到它。 單擊后，此click事件將轉到DOM的頂部，並且在遇到click事件處理程序時，將執行與該事件處理程序關聯的功能。
感謝大家！
2 個解決方案
解決方案1
3 已采納 2015-05-29 22:22:24
據我了解，這意味着click事件首先傳播到“ p”子元素，或者傳播到DOM。
否。在這種情況下， p元素是事件的目標。 事件傳播到div元素。 div元素具有click處理程序，並且該處理程序已執行。
這就是事件的工作方式。 事件的目標是觸發事件的元素，目標可以是您已將偵聽器附加到的元素，也可以是子元素/后代之一。 event對象的target屬性引用event的目標元素，當使用addEventListener附加事件偵聽器時，處理程序的this值引用處理程序的所有者，在本例中為div元素。
您已附加事件偵聽器的事實與事件的工作方式無關。 只要用戶單擊，就會觸發單擊事件。 是您（開發人員）附加了事件偵聽器，以偵聽為元素觸發的特定事件。 如果您不附加偵聽器，則仍會觸發事件。
解決方案2
0 2015-05-29 22:27:59
當您單擊該段落時，該段落不會被處理，因此它會傳播到DIV。 如果使用此版本的代碼，它將顯示事件要處理的元素。 警報說的是divi ，而不是para 。
var elementd = document.getElementById('divi'); elementd.addEventListener("click", MessageD); function MessageD() { alert(this.id); }
<div id="divi"> <p id="para">Paragraph</p> </div>
JavaScript中的事件在事件冒泡或冒泡失敗
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.