[jQuery] Event

Event

사용자의 반응을 기다리거나 그 사건이 일어날 때까지 기다리다가 그 사건이 일어났을 때에 바로 프로그램이 실행되도록 해주는 개념이 바로 '이벤트'이다.

jQuery에서는 기본적으로 마우스 관련 이벤트 뿐만아니라 문서로딩, 폼, 키보드, 스트롤과 관련되 많은 이벤트가 제공된다.

기본적으로 전역에 작성된 프로그램은 프로그램이 실행됨과 동시에 바로 실행되지만 함수로 묶인 부분은 호출되지 않으면 실행되지 않는다.

이러한 이유 때문에 원하는 시점에 원하는 기능을 실행하기 위해서는 프로그램 실행의 계기가 되는 점이 필요하다. 이러한 역할을 하는 것이 Event이며, 모든 함수는 Event와 연결되어 호출되는 형태를 가진다.

1. JQuery 이벤트 처리 방식

(1) 객체에 직접 이벤트를 등록

$("#obj").click(함수);

function sum(){

alert("hello");

}

$("div").click(sum);

(2) bind 메서드를 이용하여 등록

$("#obj").bind("click", 함수);

cp.) 다수의 이벤트를 한 번에 설정하기

$("#obj").bind("mouseenter mouseleave", 함수)

function sum(){

alert("hello");

}

$("div").bind("click", sum);

(3) 이벤트 제거

// id가 obj 객체에 click 이벤트를 제거

$("#obj").unbind("click");

//id가 obj객체에 모든 이벤트를 제거

$("#obj").unbind();

cf.) hover 이벤트

hover 이벤트는 mouseenter와 mouseleave 이벤트를 하나로 묶어 처리해주는 이벤트이다.

$("selector").hover(function( ){ }, function( ) { });

// hover 매개변수 각각 mouseenter 이벤트시 호출 mouseleave 이벤트시 호출

hover는 2개의 함수를 가지고 있는데, 첫 번째 함수는 mouseenter 이벤트 때에 호출되는 함수이고, 두 번째 함수 mouseleave 이벤트 때에 호출되는 함수이다.

2. 이벤트 흐름 및 차단

(1) 이벤트 흐름

이벤트 흐름이란, 이벤트가 전달되는 단계 또는 순서라고 생각하면 된다.

예를 들어 문서 구조의 <div> 요소 안에 <a> 요소가 있다고 가정할 때 <a> 요소에 click 이벤트가 발생하면 <a> 태그도 click 이벤트를 감지할 수 있고, <div> 요소도 감지할 수 있다.

이렇게 여러 개의 중첩되는 요소가 있는 구조에 이벤트가 발생한다.

이벤트의 흐름은 크게 세 가지로 나누어 볼 수 있다.

1 capture 단계: 부모 노드에서부터 target 노드 전까지를 의미한다.

2 target 단계: 현재 클릭한 마지막 자식 노드를 의미한다.

3 bubbling 단계: target 노드부터 조상 노드까지를 의미한다.

이처럼 이벤트는 세 가지 흐름을 통해 순차적으로 이벤트가 전달된다. jQuery에서는 기본적으로 bubbling 단계를 지원하므로 이 단계를 잘 이해하자.

(2) 이벤트 차단

이벤트 차단이란, 이벤트의 흐름을 막는 것을 말한다. 이는 여러 개의 중첩 요소가 있는 구조에 이벤트가 발생했을 때에 이벤트의 흐름이 더 이상 진행되지 못하도록 차단하는 것으로, jQuery에서는 이벤트 차단을 위해

stopPropagation( ) 메서드를 제공한다

<!doctype html>

<html>

<head>

<title>Event Flow</title>

<style>

div {

width: 60px;

height: 60px;

background: #999;

padding: 20px 20px 20px 20px;

}

a {

display: block;

width: 60px;

height: 60px;

background: #0F0;

border: #000 thin solid;

}

</style>

</head>

<body>

<div>

</div>

$("div").click(function(e) {

$(this).css("background", "yellow");

});

$("a").click(function(e) {

$(this).css("background", "yellow");

//이벤트 흐름을 정지하여 더이상 부모에게 이벤트 흐름이 전달되지 않는다. bubbling 차단

e.stopPropagation();

});

</script>

</body>

</html>

e.stopPropagation(); e.stopPropagation();

문서 구조의 <div> 요소 안에는 <a> 요소가 있는데, 이 두 요소 모두에 click 이벤트를 설정하고 click 이벤트를 발생시키면 요소를 노란색으로 변경할 수 있다.(bubbling)

위의 그림에서 a를 click하면 <a> 요소가 click 이벤트를 감지하여 배경색을 노란색을 변경한다. 그리고 click 이벤트가 부모에게 전달되어 <div> 요소의 배경색도 노란색으로 변경된다.

이렇게 이벤트가 bubbling되면서 부모 노드에세도 이벤트가 전달되므로 부모가 해당 이벤트를 설정하고 있다면 호출된다.

이렇게 stopPropagation() 메서드로 이벤트가 bubbling되는 것을 막음으로써 부모 노드로 이동하는 이벤트 흐름을 차단하게 된다. 그래서 <a> 요소를 click하기만 해도 <a> 요소의 배경색이 변경되는 것을 알 수 있다.

예제1. bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출

<html>

<head>

function clickHandler(e){

alert('thank you');

}

$(document).bind('ready', function(){

//bind: ready이벤트를 감지하기 위해 사용

$('#click_me').bind('click', clickHandler);

$('#remove_event').bind('click', function(e){

//function(e)익명함수를 사용한 이유: 이벤트를 설치할 때 사용하는 로직들은 보통 재활용되지 않는 경우가 많아서

//그러한 경우 익명함수를 사용하는 것이 편리하다.

$('#click_me').unbind('click', clickHandler);

//unbind함수의 인자가 bind와 동일한 이유: 이벤트를 제거할 때는 어떤 이벤트 타입의,

// 어떤 이벤트 핸들러 인지를 정확히 지정해야 삭제할 수 있다.

// unbind 버튼을 누르고 난 후부터는 click me를 눌러도 이벤트가 발생하지 않는다.

});

$('#trigger_event').bind('click', function(e){

$('#click_me').trigger('click');

// unbind가 해제되어 이벤트가 발생한다.

});

})

</script>

</head>

<body>

</body>

</html>

예제2. 이벤트 헬퍼

<html>

<head>

function clickHandler(e){

alert('thank you');

}

$(document).ready(function(){

//이벤트 헬퍼: bind로 이벤트 핸들러를 설치하는 것보다 간결, 바로 ready함수 사용

$('#click_me').click(clickHandler);

$('#remove_event').click(function(e){

$('#click_me').unbind('click', clickHandler);

});

$('#trigger_event').click(function(e){

$('#click_me').trigger('click');

});

})

</script>

</head>

<body>

</body>

</html>

예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.

<html>

<head>

function clickHandler(e) {

alert('thank you');

}

// 보통 ready라는 타이밍을 넣어 안전한 타이밍을 넣어주나 live는 그러한 타이밍이 없이 바로 이벤트 발생

// live를 사용하게 되면 현재 화면상에 존재하지 않는 element라고 하더라도 이벤트를 설치할 수 있다.

$('#click_me').live('click', clickHandler);

$('#remove_event').live('click', function(e) {

$('#click_me').die('click', clickHandler);

});

$('#trigger_event').live('click', function(e) {

$('#click_me').trigger('click');

});

</script>

</head>

<body>

</body>

</html>

저작자표시

'WebFont-end > jQuery' 카테고리의 다른 글

[jQuery] Animation (0)	2014.12.07
[jQuery] Effects (0)	2014.12.07
[jQuery] Attribute/CSS (0)	2014.12.07
[jQuery] DOM Manipulation (0)	2014.12.07
[jQuery] Traversing (0)	2014.12.07

'WebFont-end > jQuery' 카테고리의 다른 글

티스토리툴바