버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?
- WBOY원래의
- 2024-01-13 10:34:05689검색
버블링 이벤트 예외: 버블링할 수 없는 이벤트는 무엇인가요?
대부분의 경우 웹페이지의 이벤트는 버블링 메커니즘을 통해 전달되고 처리될 수 있습니다. 그러나 일부 특별 이벤트는 버블링이 불가능한 경우도 있습니다. 이 문서에서는 버블링할 수 없는 몇 가지 일반적인 이벤트를 소개하고 독자의 이해를 돕기 위한 코드 예제를 제공합니다.
-
focus및blur이벤트: 이 두 이벤트는 요소의 포커스 변경과 관련됩니다. 요소가 포커스를 얻으면focus이벤트가 트리거되고, 요소가 포커스를 잃으면blur이벤트가 트리거됩니다. 포커스 변경은 상위 요소나 다른 하위 요소가 아닌 특정 요소에서 발생하므로 이 두 이벤트는 버블링될 수 없습니다.
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和mouseleave다음은 입력 상자에 포커스가 있을 때 버블링 이벤트를 사용하여 이벤트를 캡처할 수 없는 샘플 코드입니다.
focus 이벤트는 body 요소에 버블링되는 focus 이벤트를 트리거하지 않습니다. 🎜- 🎜
mouseenter 및 mouseleave 이벤트: 이 두 이벤트는 커서가 요소 경계에 들어오거나 나갈 때를 감지하는 데 사용됩니다. mouseover 및 mouseout 이벤트와 달리 mouseenter 및 museleave 이벤트는 상위 또는 하위 요소에 버블링되지 않습니다. div 요소에 들어가거나 나갈 때 이 두 이벤트는 버블링 이벤트를 통해 캡처할 수 없습니다. 🎜rrreee🎜위 코드에서, 마우스가 div 요소에 들어가면 mouseenter 이벤트만 트리거되고 body 요소에 버블링되는 mouseenter 이벤트 이벤트가 발생하지 않습니다. 🎜🎜요약하자면, focus, blur, mouseenter 및 mouseleave 이벤트는 버블링 메커니즘 및 처리를 통해 전달될 수 없습니다. . 이러한 특별한 이벤트를 이해하고 구별하는 것은 프론트엔드 개발자로서 필수적인 지식 중 하나입니다. 🎜위 내용은 버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.