focus() 이벤트
정의 및 사용법
포커스 이벤트는 요소가 포커스를 얻을 때 발생합니다.
마우스 클릭으로 요소를 선택하거나 탭 키로 위치를 지정하면 해당 요소에 초점이 맞춰집니다.
focus() 메서드는 포커스 이벤트를 트리거하거나 포커스 이벤트가 발생할 때 실행할 함수를 지정합니다.
blur() 이벤트
정의 및 사용법
blur 이벤트는 요소가 포커스를 잃을 때 발생합니다.
blur() 함수는 흐림 이벤트를 트리거하거나, 함수 매개변수가 설정된 경우 흐림 이벤트가 발생할 때 실행될 코드를 함수에서 지정할 수도 있습니다.
팁: 이전에는 흐림 이벤트가 양식 요소에서만 발생했습니다. 새 브라우저에서는 이 이벤트를 모든 요소에서 사용할 수 있습니다.
아래 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
请输入：<input type="text">
<script>
$('input').focus(function(){
$('input').css('background',"red");
})
$('input').blur(function(){
$('input').css('background',"green");
})
</script>
</body>
</html>텍스트 상자를 클릭하면 텍스트 상자가 포커스를 받고 배경색이 빨간색으로 변합니다.
텍스트 상자 외부를 클릭하면 텍스트 상자가 포커스를 잃고 녹색으로 변합니다
다음 섹션