Heim > Artikel > Web-Frontend > Welche Ausnahmen gibt es für Veranstaltungen, die nicht sprudeln können?
Welche Ausnahmen gibt es für Veranstaltungen, die nicht sprudeln können?
- WBOYOriginal
- 2024-01-13 10:34:05648Durchsuche
Ausnahmen für Bubbling-Events: Welche Events können nicht gesprudelt werden?
In den meisten Fällen können Ereignisse auf Webseiten über den Bubbling-Mechanismus übermittelt und verarbeitet werden. In einigen Fällen können jedoch einige Sonderereignisse nicht gesprudelt werden. In diesem Artikel werden einige häufige Ereignisse vorgestellt, die nicht in Blasen umgewandelt werden können, und Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis zu erleichtern.
-
focus- undblur-Ereignisse: Bei diesen beiden Ereignissen handelt es sich um Fokusänderungen von Elementen. Wenn ein Element den Fokus erhält, wird das Ereignisfocusausgelöst; wenn das Element den Fokus verliert, wird das Ereignisblurausgelöst. Da die Fokusänderung auf ein bestimmtes Element und nicht auf dessen übergeordnetes oder andere untergeordnete Elemente erfolgt, können diese beiden Ereignisse nicht ineinander übergehen.
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和mouseleaveDas Folgende ist ein Beispielcode, wenn das Eingabefeld den Fokus erhält, kann das Ereignis nicht mit Bubbling-Ereignissen erfasst werden:
focus-Ereignis löst nicht das focus-Ereignis aus, das zum body-Element führt. 🎜- 🎜
mouseenter- und mouseleave-Ereignisse: Diese beiden Ereignisse werden verwendet, um zu erkennen, wann der Cursor die Grenzen eines Elements betritt oder verlässt. Im Gegensatz zu den Ereignissen mouseover und mouseout werden die Ereignisse mouseenter und mouseleave nicht an übergeordnete oder untergeordnete Elemente weitergeleitet. div-Element betritt oder verlässt, können diese beiden Ereignisse nicht durch Blasenereignisse erfasst werden: 🎜rrreee🎜Im obigen Code Wenn die Maus das div-Element betritt, wird nur das mouseenter-Ereignis ausgelöst und das mouseenter-Ereignis, das zum <code>body-Element übergeht wird kein Ereignis ausgelöst. 🎜🎜Zusammenfassend lässt sich sagen, dass die Ereignisse focus, blur, mouseenter und mouseleave nicht über den Bubbling-Mechanismus und die Verarbeitung übermittelt werden können . Das Verstehen und Unterscheiden dieser besonderen Ereignisse gehört zu den wesentlichen Kenntnissen eines Frontend-Entwicklers. 🎜Das obige ist der detaillierte Inhalt vonWelche Ausnahmen gibt es für Veranstaltungen, die nicht sprudeln können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!