웹 브라우저에서 onblur와 onfocusout의 차이점은 무엇입니까?
동일하다면 왜 이런 종류의 이벤트가 두 개 있습니까?
아시다시피 onBlur 이벤트는 요소에 포커스가 있지만 잃어버린 경우 요소에 대해 발생합니다.
onFocusOut 이벤트이 경우 화재뿐만 아니라 트리거 하위 요소가 포커스를 잃을 경우.
예를 들어, 사람이 현재 해당 영역의 필드를 편집하고 있기 때문에 특수 형식의 div가 있습니다. 포커스가 해당 div를 벗어날 때 onFocusOut 을 사용 하여 해당 서식을 끌 수 있습니다 .
최근까지 onFocusOut 은 IE에서만 사용되었습니다. 그것이 변경 되었다면 그것은 매우 최근의 것입니다. FF, Chrome 등에서 테스트합니다.
focusout 이벤트 유형 의 사양에 따라 :
이 이벤트 유형은 blur와 유사하지만 포커스가 이동하기 전에 전달되고 거품이 발생합니다.
반면 blur이벤트는 버블을하고, 나중에 전달됩니다.
2017 년에는 본질적으로 차이가 없습니다.
https://www.quirksmode.org/js/events_order.html
이벤트 캡처 또는 버블 링을 의식적으로 사용하는 웹 개발자는 거의 없습니다. 오늘날 만들어진 웹 페이지에서는 버블 링 이벤트를 여러 가지 이벤트 처리기에서 처리 할 필요가 없습니다. 사용자는 한 번의 마우스 클릭 후 여러 가지 일이 발생하여 혼란 스러울 수 있으며 일반적으로 이벤트 처리 스크립트를 분리하여 유지하려고합니다.
JQuery와 문서는 좋은있다 focusout대 blur데모 나는 명확성을 위해 아래의 재현 것이다. 간단히 말해, 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>
'Programing' 카테고리의 다른 글
| JSF panelGrid에서 colspan과 rowspan을 설정하는 방법은 무엇입니까? (0) | 2020.12.02 |
|---|---|
| 팝업에 입력 오류를 표시하는 방법은 무엇입니까? (0) | 2020.12.02 |
| C / C ++에서 const 배열과 정적 const 배열의 차이점은 무엇입니까? (0) | 2020.12.02 |
| 시간 초과 WCF 서비스 (0) | 2020.12.02 |
| Websocket 서버 : 웹 소켓의 onopen 함수가 호출되지 않습니다. (0) | 2020.12.02 |