본문 바로가기

개발/javascript&jquery

[jQuery] .focus() .blur() 차이점

반응형

1. .focus()는 이벤트가 포커스 되었을때 요소를 전달한다.

 

.on( "focus", handler )

.trigger( "focus" )

 

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus()on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .focus().

 

hidden 요소에 포커스 이벤트를 실행하면 인터넷익스플로 오류납니다.

hidden 요소에 포커스 이벤트를 실행하면 인터넷익스플로 오류납니다. 

요소에 포커스를 두지 않고 포커스 이벤트를 실행하기 위해서는 .triggerHandler( "focus" )를 사용합니다.

 

 

2. .blur()는 이벤트가 포커스를 잃었을때 요소를 전달한다.

 

.on("blur", handler) 

.trigger("blur") 

 

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

 

 

As the .blur() method is just a shorthand for .on( "blur", handler ), detaching is possible using .off( "blur" ).

 

 

https://api.jquery.com/blur/

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
 
</head>
<body>
 
이름:<input type="text" name="firstname"><br><br>
이메일:<input type="text" name="email"><br>
 
<script type="text/javascript">
 
$(function() {
    $("input").focus(function () {
        $(this).css("background-color", "#ffff00");
    });
    $("input").blur(function () { //포커스를 잃었을때
        $(this).css("background-color", "blue");
    });
});

</script>
 
</body>
</html>

 

 

반응형