Rumah >hujung hadapan web >tutorial js >Apakah pengecualian untuk acara yang tidak boleh menggelembung?
Apakah pengecualian untuk acara yang tidak boleh menggelembung?
- WBOYasal
- 2024-01-13 10:34:05706semak imbas
Pengecualian untuk acara menggelegak: Apakah acara yang tidak boleh menggelegak?
Dalam kebanyakan kes, acara dalam halaman web boleh dihantar dan diproses melalui mekanisme menggelegak. Walau bagaimanapun, dalam beberapa kes, beberapa acara istimewa tidak boleh dibuih. Artikel ini akan memperkenalkan beberapa peristiwa biasa yang tidak boleh dibuih dan memberikan contoh kod untuk membantu pembaca memahami dengan lebih baik.
- Acara
fokus dan kabur: Kedua-dua peristiwa ini melibatkan perubahan fokus elemen. Apabila elemen memperoleh fokus, peristiwafokusdicetuskan apabila elemen kehilangan fokus, peristiwakaburdicetuskan. Oleh kerana perubahan fokus berlaku pada elemen tertentu, bukan induknya atau elemen keturunan lain, kedua-dua peristiwa ini tidak boleh timbul.
focus和blur事件：这两个事件涉及到元素的焦点变化。当一个元素获得焦点时，会触发focus事件；当元素失去焦点时，会触发blur事件。由于焦点变化发生在特定的元素上，而不是其父元素或其他后代元素上，所以这两个事件无法进行冒泡。下面是一个示例代码，当输入框获得焦点时，使用冒泡事件无法捕获该事件：
<!DOCTYPE html>
<html>
<head>
<title>Focus and Blur Event</title>
</head>
<body>
<div>
<input type="text" id="myInput">
</div>
<script>
var myInput = document.getElementById("myInput");
myInput.addEventListener("focus", function(){
console.log("Input has focus");
});
document.body.addEventListener("focus", function(){
console.log("Focus event bubbled");
}, true);
// 输出结果：
// Input has focus
</script>
</body>
</html>在上面的代码中，当输入框获得焦点时，只会触发focus事件，并不会触发冒泡到body元素上的focus事件。
-
mouseenter和mouseleave事件：这两个事件用于检测光标进入或离开元素的边界。与mouseover和mouseout事件不同，mouseenter和mouseleave事件不会冒泡到父元素或后代元素上。
下面是一个示例代码，当鼠标进入或离开div元素时，无法通过冒泡事件捕获这两个事件：
<!DOCTYPE html>
<html>
<head>
<title>Mouse Enter and Leave Event</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseenter", function(){
console.log("Mouse entered the div");
});
document.body.addEventListener("mouseenter", function(){
console.log("Mouse entered the body");
}, true);
// 输出结果：
// Mouse entered the div
</script>
</body>
</html>在上面的代码中，当鼠标进入div元素时，只会触发mouseenter事件，并不会触发冒泡到body元素上的mouseenter事件。
总结而言，focus、blur、mouseenter和mouseleaveBerikut ialah kod sampel Apabila kotak input mendapat fokus, acara tidak boleh ditangkap menggunakan peristiwa menggelegak:
focus tidak akan mencetuskan acara focus yang menggelembung ke elemen body. 🎜- 🎜
masuk tetikus dan mouseleave peristiwa: Kedua-dua peristiwa ini digunakan untuk mengesan apabila kursor memasuki atau meninggalkan sempadan elemen. Berbeza dengan acara mouseout dan mouseout, acara mouseenter dan mouseover tidak menggelembungkan ke elemen induk atau keturunan . div, kedua-dua peristiwa ini tidak boleh ditangkap melalui peristiwa menggelegak: 🎜rrreee🎜Dalam kod di atas, apabila tetikus memasuki elemen div, hanya acara mouseenter akan dicetuskan dan acara mouseenter yang menggelembung ke elemen <code>body tidak akan dicetuskan acara. 🎜🎜Ringkasnya, acara fokus, blur, mouseenter dan mouseeleave tidak boleh dihantar melalui mekanisme menggelegak dan pemprosesan . Memahami dan membezakan acara istimewa ini adalah salah satu pengetahuan penting sebagai pembangun bahagian hadapan. 🎜Atas ialah kandungan terperinci Apakah pengecualian untuk acara yang tidak boleh menggelembung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!