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