哪些事件支持事件冒泡_支援事件冒泡的事件有哪些-前端問答-PHP中文網

哪些事件支持事件冒泡

百草

發布： 2023-11-20 15:29:53

原創

1265 人瀏覽過

支援事件冒泡的事件有滑鼠事件、鍵盤事件、表單事件、視窗事件、觸控事件等。詳細介紹：1、滑鼠事件，click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等；2、鍵盤事件，keydown、keyup、keypress等；3、表單事件，submit、change、focus、blur等；4 、視窗事件等等。

哪些事件支持事件冒泡

本教學作業系統：windows10系統、DELL G3電腦。

事件冒泡（event bubbling）是JavaScript中常見的事件傳播方式。當一個事件在某個元素上觸發時，這個事件不僅在該元素上觸發，還會向上冒泡，觸發其父元素的事件處理函數。這種冒泡機制使得我們可以用更少的程式碼來處理同一個事件，特別是在處理複雜的DOM結構時。

大部分瀏覽器事件都支援事件冒泡，包括：

1、滑鼠事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等；

2、鍵盤事件：keydown、keyup、keypress等；

3、表單事件：submit、change、focus、blur等；

4、視窗事件：load、unload 、resize、scroll等；

5、觸控事件：touchstart、touchend、touchmove等（注意，並非所有瀏覽器都支援所有觸控事件）。

以下是一些具體範例：

// 鼠标事件冒泡  
document.getElementById("outer").addEventListener("click", function() {  
  console.log("outer clicked");  
});  
  
document.getElementById("inner").addEventListener("click", function() {  
  console.log("inner clicked");  
});  
  
// 键盘事件冒泡  
document.getElementById("outer").addEventListener("keydown", function() {  
  console.log("outer keydown");  
});  
  
document.getElementById("inner").addEventListener("keydown", function() {  
  console.log("inner keydown");  
});  
  
// 表单事件冒泡  
document.getElementById("outer").addEventListener("submit", function() {  
  console.log("outer submit");  
});  
  
document.getElementById("inner").addEventListener("submit", function() {  
  console.log("inner submit");  
});

登入後複製

在上述範例中，當點擊或按鍵發生在"inner"元素上時，"inner"元素和"outer"元素的事件處理函數都會被觸發。這就是事件冒泡的效果。

以上是哪些事件支持事件冒泡的詳細內容。更多資訊請關注PHP中文網其他相關文章！