[JS + jquery] 제이쿼리 이벤트 객체와 종류, 포커스 이벤트, 키보드 이벤트 (scroll(), focus(), blur(), focusin(), focusout(), change(), keydown(), keyup(), keypress(), $(this), index())

 

1. 이벤트 객체와 종류 

사용자가 이벤트를 발생시킬때 마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. 

 

$("이벤트 대상 선택").mousemove(function(매개변수) {

  매개변수(이벤트 객체).속성;

});

 

- 이벤트 객체의 속성 종류 

 

1️⃣ 마우스 이벤트 

clientX  마우스 포인터 x 좌푯값 반환 (스크롤 이동거리 무시) 

clientY  마우스 포인터 y 좌푯값 반환 (스크롤 이동거리 무시) 

pageX  스크롤 x 축의 이동한 거리를 계산하여 마우스 포인터의 x 좌푯값을 반환 

pageY  스크롤 y 축의 이동한 거리를 계산하여 마우스 포인터의 y 좌푯값을 반환 

screenX 화면 모니터를 기준으로 마우스 포인터의 x 좌푯값 반환 

screenY 화면 모니터를 기준으로 마우스 포인터의 y 좌푯값 반환 

layerX position을 적용한 요소를 기준으로 마우스 포인터의 x 좌푯값 반환 

layerY position을 적용한 요소를 기준으로 마우스 포인터의 y 좌푯값 반환 

button  마우스 버튼의 종류에 따라 값을 반환 

 

 

2️⃣ 키보드 이벤트 

keyCode  키보드 아스키 코드값을 반환 

altKey 이벤트 발생 시 alt키를 눌렀으면 true 반환 아니면 false 반환 

ctrlKey 이벤트 발생 시 ctrl 키를 눌렀으면 true 반환 아니면 false 반환 

shiftKey  이벤트 발생시 shift  키를 눌렀으면 true 반환 아니면 false 반환 

 

 

3️⃣ 전체 이벤트 

target 이벤트가 전파된 마지막 요소를 가르킨다.

cancelBubble 이벤트의 전파를 차단하는 속성으로 기본값은 false 이며 true로 설정하면 전파가 차단된다. 

stopPropagation() 이벤트의 전파를 차단한다.  

preventionDefault()  기본 이벤트를 차단한다. 

 

 

2. scroll() 이벤트 메서드 

scroll() 이벤트 메서드는 대상 요소의 스크롤바가 이동할 때 마다 이벤트를 발생시키거나 강제로 scroll 이벤트를 발생시키는데 사용한다. 

$("이벤트 대상선택").scroll(function () {자바스크립트 코드;});

$("이벤트 대상 선택").on("scroll", function() { 자바스크립트 코드;});

 

$("이벤트 대상 선택").scroll(); 

3. 포커스 이벤트 

포커스는 마우스로 <a> 또는 <input> 태그를 클릭하거나 tab키를 누르면 생성된다. 

키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 될 수 있으면 <a> 또는 <input> 태그에 등록하고, 키보드가 없을 경우를 고려하여 마우스 이벤트에 대응할 수 있는 키보드 이벤트가 등록되어야 한다. 

 

1️⃣ focus()/ blur() / focusin()/ focusout() 이벤트 메서드 

focus() 이벤트 메서드 : 대상 요소로 포커스가 이동하면 이벤트를 발생시킨다. 

blur() 이벤트 메서드 : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생시킨다. 

focusin() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생시킨다.

focusout() 이벤트 메서드 : 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 포커스가 이동하면 이벤트를 발생시킨다. 

 

$("이벤트 대상 선택").focus(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("focus", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").focus();

 

$("이벤트 대상 선택").blur(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("blur", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").blur();

 

$("이벤트 대상 선택").focusin(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("focusin", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").focusin();

 

 

$("이벤트 대상 선택").focusout(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("focusout", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").focusout();

* 키보드로 마우스 이벤트 대응하기 

키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있도록 하는 것을 말한다. 

mouseover => focus

mouseout => blur

비 추천 방식 - 키보드 접근성 고려 x 

추천 방식 키보드 접근성 고려 

버튼2는 tab키로도 focus 잡힘 

 

2️⃣ change() 이벤트 메서드 

change() 이벤트 메서드는 선택한 폼 요소의 값을 새 값으로 바꾼다. 포커스가 다른 요소로 이동하면 이벤트를 발생시킨다. 

$("이벤트 대상 선택").change(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("change", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").change();

 

 

4. 키보드 이벤트 

키보드 이벤트는 사용자가 키보드로 입력하면 발생한다. 

 

1️⃣ keydown() / keyup()/ keypress() 이벤트 메서드 

keydown()과 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생시킨다. 

keydown()은 모든 키(한글 키 제외)에 대해서 이벤트를 발생시킨다.

keypress()는 기능키(f1~f12, alt, ctrl, shift, backspace, 한/영, tab 등) 에 대해서는 이벤트를 발생시키지 않는다, 

키보드 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있다. 

 

keyup() 이벤트 메서드는 자판의 키를 눌렀다 키에서 손을 떼면 이벤트를 발생시키거나 keyup 이벤트를 강제로 발생시킨다. 

 

$("이벤트 대상 선택").keydown(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("keydown", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").keydown();

 

$("이벤트 대상 선택").keypress(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("keypress", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").keypress();

 

$("이벤트 대상 선택").keyup(function() {자바스크립트 코드;});

$("이벤트 대상 선택").on("keyup", function() {자바스크립트 코드;});

 

$("이벤트 대상 선택").keyup();

 

4. 이벤트가 발생한 요소 추적하기 

 

1️⃣ $(this) 선택자 

$(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다. 

 

 

2️⃣ index() 인덱스 반환 메서드 

index() 인덱스 반환 메서드는 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다. 

$("이벤트 대상 선택").on("이벤트 종류", function() {

  $("이벤트 대상 선택").index(this);

});