首頁  >  文章  >  web前端  >  哪些事件支持事件冒泡

哪些事件支持事件冒泡

百草
百草原創
2023-11-20 15:29:531195瀏覽

支援事件冒泡的事件有滑鼠事件、鍵盤事件、表單事件、視窗事件、觸控事件等。詳細介紹: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn