📚 제이쿼리 이벤트 종류 & 설정 총정리

...

jQuery 이벤트 문법

웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다. 이러한 사용자의 동작들이 모두 이벤트(event)를 발생시키는 것이다.

정리하자면, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행하게 되는 원리이다.
제이쿼리는 자바스크립트의 이벤트 헨들러와 동일하게 동작한다. 또한 제이쿼리에서는 윈도우 이벤트, 마우스 이벤트, 폼 관련 이벤트, 키보드 이벤트 등 자주 사용하는 이벤트 헬프 메소드 묶음들을 제공한다. 자바스크립트에 비해 보다 편리하고 직관적인 이벤트 메소드을 이용해 보다 수월히 관리가 가능하다.

이벤트 핸들러

제이쿼리 이벤트 메서드	설명
bind()	이벤트를 연결함 => $(selector).bind(eventName, function(event){} ); => $(selector).bind(object);
unbind()	bind() 메서드를 사용한 이벤트 연결 제거 => $(selector).unbind(); => $(selector).unbind(eventName); => $(selector).unbind(eventName, function);
delegate()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연경함 (version:1.4.3*)
undelegate()	delegate() 메서드를 사용해 연결한 이벤트를 제거함 (version:1.4.3*)
live()	현재 또는 미래에 존재하는 문서 객체에 이벤트를 연결함
die()	live() 메서드를 사용해 연결한 이벤트를 제거함 => $(selector).die() => $(selector).die(eventName) => $(selector).die(eventName , function)
one()	이벤트를 한번만 연결함
on()	이벤트를 연결함, 아래 이벤트열결을 대체함 ( delegate 대체함 version:1.7 ) => bind() : $(selector).on(eventName , eventHandler) => live() : $(document).on(eventName , selector, eventHandler) => delegate() : $(selector).on(eventName , selector , eventHandler)
off()	이벤트를 제거함 => unbind() : $(selector).off(eventName[, eventHandler]) => die() : $(document).off(eventName , selector[, eventHandler]) => undelegate() : $(selector).off(eventName , selector[, eventHandler])
toggle(function(event){}, ... , function(event){} )	click 이벤트를 여러 이벤트 핸들러를 번갈아가며 실행할 수있게 연결함
hover(mouseenter , mouseleave)	mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함
trigger()	이벤트를 강제 발생 => $(selector).trigger(eventName) => $(selector).trigger(eventName, data)

// 자바스크립트
document.querySelector("#btn").addEventListener("click", function(event) {  
});


// 제이쿼리
$("#btn").on("click", function(event) {  
});

이벤트의 연결

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트의 연결(event binding)이라고 한다.

다음 예제는 id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 연결하는 다양한 방법을 보여준다.

// 옛날 방법
$("#btn").click(function(event) {  });

$("#btn").bind("click", function(event) {  });

// 최신 방법
$("#btn").on("click", function(event) {  });


$("body").on({ // <body>요소에
     click: function() { // 객체로
         $("#text").html("버튼을 클릭했습니다!");
     }
}, "#btn"); // id가 "btn"인 요소에 이벤트 핸들러를 등록함.


$("body").on("click", "#btn", function(event) {  }); // 파라미터로 등록할 요소 btn를 전달

제이쿼리 1.0에서는 ~~.bind()~~ 메소드를 사용하여 이벤트 핸들러를 등록했었다. 그다음에는 ~~.live()~~ 메소드와 ~~.delegate()~~ 메소드를 거쳐, 현재는 ~~.on()~~ 메소드를 이용하여 이벤트를 처리하고 있다.

on() 메소드

.on() 메소드를 사용하면 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.

// 모든 <button>요소에 mouseenter와 click mouseleave 이벤트를 설정함.
 $("button").on("mouseenter click mouseleave", function() {

     $("#text").append("마우스가 버튼 위로 진입하거나 클릭하거나 빠져나갔어요!<br>");

 });

또한, 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 연결할 수도 있다.

$("button").on({ // 모든 <button>요소에

    mouseenter: function() { // mouseenter 이벤트를 설정함.
        $("#text").append("마우스가 버튼 위로 진입했어요!<br>");
    },

    click: function() {      // click 이벤트를 설정함.
        $("#text").append("마우스가 버튼을 클릭했어요!<br>");
    },

    mouseleave: function() { // mouseleave 이벤트를 설정함.
        $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
    }
 });

one() 메소드

.one() 메소드는 연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행되지 않는 일회용 이벤트 핸들러 이다.

$("button").one("click", function() {

     // 모든 <button>요소가 처음 클릭됐을 때에만 실행됨.
     $("#text").append("첫 번째 클릭이에요!<br>");

     // 모든 <button>요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
     $(this).click(function() {
         $("#text").append("이 버튼을 벌써 클릭했네요!<br>");
     });
});

.one() 메소드는 .on() 메소드와 같은 인수를 전달받습니다.
따라서 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 가질 수 있는 등 .on() 메소드와 같은 특징을 갖습니다.

off() 메소드

.off() 메소드는 더는 사용하지 않는 이벤트와의 연결을 제거한다.

$("#clickBtn").on("click", function() { // id가 "clickBtn"인 요소를 클릭했을 때 실행됨.
     $("#text").append("버튼을 클릭했어요!<br>");
});

$("#removeBtn").on("click", function() {
     $("#clickBtn").off("click"); // id가 "clickBtn"인 요소의 클릭 이벤트와의 연결을 제거함.
});

이벤트의 위임 (event delegation)

이벤트는 기본적을 버블링, 캡쳐링이 일어난다. 제이쿼리에선 이러한 무분별한 버블링을 솎아 내기 위해 제이쿼리 전용 두 세번째 파라미터를 제공한다.

제이쿼리는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 조상 요소에 단 한 번만 연결하면 동작할 수 있도록 해준다.

.on( events [, selector ] [, data ], handler )

Parameter	Description
events	1개 또는 2개 이상의 공백으로 구분된 이벤트명
selector	이벤트를 바인딩할 매치드셋의 후손 선택자
data	이벤트핸들러에 전달할 데이터. 이벤트핸들러의 매개변수 event.data에 담겨 전달된다.
handler	이벤트가 발생했을 때 실행될 함수. 첫번째 인자로 이벤트 객체가 암묵적으로 전달된다.

예를 들어 바닐라 자바스크립트나 제이쿼리나 요소마다 직접 등록된 이벤트 핸들러는 현재 존재하는 요소에만 연결되며, 새롭게 추가되는 요소에는 연결되지 않는다. 그래서 바닐라 자바스크립트에서는 동적으로 추가된 요소에 대해 별도로 이벤트 등록을 추가로 해주어야 했다.

<ul>
    <li><a href="/html/intro">HTML</a></li>
	<li><a href="/css/intro">CSS</a></li>
</ul>

$("ul a").on("click", function(event) { // <ul>요소의 자식 요소 중 모든 <a>요소를 클릭했을 때,
    event.preventDefault();  // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
    $("#text").append("이 링크는 동작하지 않습니다!<br>");
});

$("button").one("click", function() {
    $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');\
    // a태그를 추가해도 위의 이벤트 링크막기 동작안함
    // 스크립트로 추가된 태그는 이벤트로 등록이 안되기 때문.
});

하지만 위의 예제에 이벤트의 위임을 이용하면, 다음과 같이 작성할 수 있다.

.on() 메소드는 해당 요소에 첫 번째 인수로 전달받은 이벤트가 전파되었을 때, 그 이벤트를 발생한 요소가 두 번째 인수로 전달받은 선택자와 같은지를 검사한다. 만약 이벤트가 발생한 요소와 두 번째 인수로 전달받은 선택자가 같으면, 연결된 이벤트 핸들러를 실행한다.

$("ul").on("click", "a", function(event) { // ul에서 이벤트를 바인딩할 매치드셋의 후손 선택자 a요소에게 이벤트 설정
     event.preventDefault(); // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
     $("#text").append("이 링크는 동작하지 않습니다!<br>");
});

$("button").one("click", function() {
    $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
});

이벤트의 위임을 이용하면 현재 존재하는 자손 요소뿐만 아니라, 나중에 추가되는 자손 요소까지도 모두 자동으로 연결된다.

jQuery 이벤트 속성

이벤트 객체속성

event.pageX	브라우저의 화면을 기준으로 한 마우스의 X좌표 위치
event.pageY	브라우저의 화면을 기중으로 한 마우스의 Y좌표 위치
event.preventDefault()	기본 이벤트를 제거함
event.stopPropagation()	이벤트 전달을 제거함

마우스 이벤트

click	마우스를 클릭할 때 발생함.
dblclick	마우스를 더블클릭할 때 발생함.
mousedown	마우스 버튼을 누를 때 발생함.
mouseup	마우스 버튼을 뗄 때 발생함.
mouseenter	마우스 요소의 경계 외부에서 내부로 이동할 때 발생. (자기자신만 이벤트)
mouseleave	마우스 요소의 경계 내부에서 외부로 이동할 때 발생. (자기자신만 이벤트)
mousemove	마우스를 움직일 때 발생함.
mouseout	마우스가 요소를 벗어날 때 발생함. (버블링)
mouseover	마우스를 요소 안에 들어올 때 발생함.(버블링)

키보드 이벤트

keydown	키보드가 눌러질 때 발생함.
keypress	글자가 입력될 때 발생함.
keyup	키보드가 떼어질 때 발생함.

윈도우 이벤트

ready	문서 객체가 준비를 완료함.
load	윈도우(문서 객체)를 불러들일 때 발생함.
unload	윈도우(문서 객체)를 닫을 때 발생함.
resize	윈도우의 크기를 변화시킬 때 발생함.
scroll	윈도우를 스크롤할 때 발생함. => $(window).scroll(function(){ });
error	에러가 있을 때 발생함.

입력 양식 이벤트

change	입력 양식의 내용을 변경할 때 발생함.
focus	입력 양식에 초점을 맞추면 발생함.
focunsin	입력 양식에 초점이 맞춰지기 바로 전에 발생함.
focusout	입력 양식에 초점이 사라지기 바로 전에 발생함.
blur	입력 양식에 초점이 사라지면 발생함.
select	입력 양식을 선택할 때 발생함(input[type=text] 태그와 textarea 태그 제외).
submit	submit 버튼을 누르면 발생함.
reset	reset 버튼을 누르면 발생함.

간단한 이벤트 종류

blur	focus	focusin	focusout	load
resize	scroll	unload	click	dblclick
mousedown	mouseup	mousemove	mouseover	mouseout
mouseenter	mouseleave	change	select	submit
keydown	keypress	keyup	error	ready

$(선택자).이벤트이름(function(event){ 
});

# 참고자료

http://tcpschool.com/jquery/jq_event_method

https://turfrain.tistory.com/entry/1-jQuery-%EB%A9%94%EC%86%8C%EB%93%9C-%EC%A0%95%EB%A6%AC

인용한 부분에 있어 만일 누락된 출처가 있다면 반드시 알려주시면 감사하겠습니다

이 글이 좋으셨다면 구독 & 좋아요

여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.