jQuery 事件冒泡

admin發表於2018-02-03
jQuery事件

冒泡事件就是，如果在某一個物件上觸發某一類事件，那麼該事件會向父級傳播，並觸發父物件上定義的同類事件。事件傳播的方向是從最底層到最頂層，類似於水泡從水底浮上來一般。

一個HTML文件可以視覺化一個DOM樹：

a:3:{s:3:\"pic\";s:43:\"portal/201702/18/001534v9f7fk37s3v52ap2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

那麼事件冒泡現象就可以形象的表示為下圖:

a:3:{s:3:\"pic\";s:43:\"portal/201702/18/001616nmv2wmmj1mr18fs4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面僅以click事件作為例子進行說明。

注意:並非所有事件都有冒泡現象，例如blur、focus、load和unload事件就不具有。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script>
$(document).ready(function(){
  $("#ant").click(function () {
    $("#result").text("螞蟻部落");
  })
})
</script>
</head>
<body>
<p id="ant">
  <input type="button" id="bt" value="檢視效果"/>
</p>
<div id="result"></div>
</body>
</html>

點選按鈕會觸發click事件，這個事件會向上傳遞，然後被p元素捕獲，恰巧，p元素上註冊了click事件處理函式，於是就會執行此事件處理函式。

相關文章