웹 브라우저에서 온블러와 포커스 아웃의 차이점은 무엇입니까?
같은 종목이면 왜 이런 종목이 두 개나 있나요?
아시다시피, onBlur 이벤트는 어떤 요소에 초점이 있을 경우 해당 요소에 대해 불이 붙지만, 이를 잃습니다.
이 경우 onFocusOut 이벤트가 발생하지만 자식 요소가 포커스를 잃은 경우에도 트리거됩니다.
예를 들어, 사용자가 현재 해당 영역의 필드를 편집하고 있으므로 특별한 형식을 가진 디바가 있습니다.포커스가 해당 디브를 떠날 때 FocusOut을 사용하여 포맷을 해제할 수 있습니다.
아주 최근까지 onFocusOut은 IE에서만 사용되었습니다.그것이 변했다면, 그것은 매우 최근의 일입니다.FF, Chrome 등에서 테스트합니다.
포커스 아웃 이벤트 유형에 대한 사양에 따라:
이 이벤트 유형은 블러와 유사하지만 포커스가 이동하기 전에 발송되며 버블이 발생합니다.
반면에.blur이벤트는 거품을 일으키고, 나중에 발송됩니다.
약간의 데모.포커스 인/포커스 아웃의 상위 디바는 색상이 변경됩니다.
div {
background-color: #eee;
padding: 5px;
}<div onfocusin="this.style['background-color']='#efe'"
onfocusout="this.style['background-color']='#eef'">
<input onfocusin="this.value='focusin'"
onfocusout="this.value='focusout'"
placeholder="focusin/focusout"/> bubbling (parent div receives event, too)
</div>
<div onfocus="this.style['background-color']='#efe'"
onblur="this.style['background-color']='#eef'">
<input onfocus="this.value='focus'"
onblur="this.value='blur'"
placeholder="focus/blur"/> not bubbling
</div>포커스 아웃 이벤트는 요소가 포커스를 잃으려고 할 때 발생합니다.
이 이벤트와 블러의 가장 큰 차이점은 포커스 아웃 버블(focus out bubble)인 반면 블러는 그렇지 않다는 것입니다.대부분의 경우 서로 교환하여 사용할 수 있습니다.
Jquery 문서에는 명확한 설명을 위해 아래에서 재현할 좋은 대 데모가 있습니다.요컨대,focusout선택기가 실행되면 실행됩니다.$('p')데모에서 — 입력 및 상위 요소를 포함하는 모든 것입니다.반면에.blur선택기가 입력에 있는 경우에만 실행됩니다.$('input').
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusout demo</title>
<style>
.inputs {
float: left;
margin-right: 1em;
}
.inputs p {
margin-top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="inputs">
<p>
<input type="text"><br>
<input type="text">
</p>
<p>
<input type="password">
</p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
<script>
var focus = 0,
blur = 0;
$( "p" )
.focusout(function() {
focus++;
$( "#focus-count" ).text( "focusout fired: " + focus + "x" );
})
.blur(function() {
blur++;
$( "#blur-count" ).text( "blur fired: " + blur + "x" );
});
</script>
</body>
</html>
2017년에는 본질적으로 차이가 없습니다.
https://www.quirksmode.org/js/events_order.html
이벤트 캡처나 버블링을 의식적으로 사용하는 웹 개발자는 거의 없습니다.오늘날의 웹 페이지에서는 버블링 이벤트를 여러 이벤트 핸들러가 처리할 필요가 없습니다.마우스를 한 번 클릭한 후 여러 가지 일이 발생하여 사용자가 혼란스러워 할 수 있으며, 일반적으로 이벤트 처리 스크립트를 분리하여 보관하고자 합니다.
두 가지 차이점이 있습니다.
focusin/focusout물거품이 되어 있는 동안focus/blur하지 마, 그리고focusin/focusout초점 이동 직전에 발사되는 동안focus/blur그 뒤에 일어나다
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
언급URL : https://stackoverflow.com/questions/7755052/in-web-browsers-whats-the-difference-between-onblur-and-onfocusout
'programing' 카테고리의 다른 글
| PowerShell Invoke-WebRequest, 원본 파일 이름을 자동으로 사용하는 방법은? (0) | 2023.10.30 |
|---|---|
| 크롬이 로컬 jQuery 쿠키를 무시하는 이유는 무엇입니까? (0) | 2023.10.30 |
| C++에서 안전 중요 소프트웨어를 위한 공식 방법 (0) | 2023.10.30 |
| ix 또는 iloc을 사용하여 panda DataFrame에서 특정 값(셀 내)이 NaN인지 확인 (0) | 2023.10.30 |
| WordPress Permalinks가 작동하지 않습니다. (0) | 2023.10.25 |