이벤트(Event) 란?
- 시스템에서 일어나는 사건을 의미
- javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
- 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
- 이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49
jQuery의 이벤트
- 크로스브라우징의 문제를 해결해줌
- bind로 이벤트 핸들러를 설치하고, unbind로 제거 (예제1)
- trigger로 이벤트 핸들러를 강제로 실행 (예제2)
- click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
- live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음
예제1. bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function clickHandler(e){
alert('thank you');
}
$(document).bind('ready', function(){
//wrapper가 시작, document:웹페이지, bind:이벤트를 설치해주는 메소드
//input버튼 생성 전에 메소드가 설립됨
$('#click_me').bind('click', clickHandler); //여기에만 이벤트가 있음
$('#remove_event').bind('click', function(e){
$('#click_me').unbind('click', clickHandler);
});//click me에 엮어있던 이벤트를 삭제
$('#trigger_event').bind('click', function(e){
$('#click_me').trigger('click');
//click me에 설치되어 있는 이벤트를 호출
});
})
</script>
</head>
<body>
<input id="click_me" type="button" value="click me" />
<input id="remove_event" type="button" value="unbind" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>
예제2. 이벤트 헬퍼
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function clickHandler(e){
alert('thank you');
}
$(document).ready(function(){
//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>
<input id="click_me" type="button" value="click me" />
<input id="remove_event" type="button" value="unbind" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>
예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function clickHandler(e) {
alert('thank you');
}
$('#click_me').live('click', clickHandler);
//live는 위임이라는 방식을 사용. 현재 화면상에 사용하고 있지 않은 엘리먼트라도
//이벤트를 설치할 수 있음. 나중에 엘리먼트 사용시 이벤트의 영향을 받음.
//live(이벤트 타입, 이벤트) 삭제시:die=unbind
$('#remove_event').live('click', function(e) {
$('#click_me').die('click', clickHandler);
});
$('#trigger_event').live('click', function(e) {
$('#click_me').trigger('click');
});
</script>
</head>
<body>
<input id="click_me" type="button" value="click me" />
<input id="remove_event" type="button" value="unbind" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 8강. Form (0) | 2021.01.24 |
|---|---|
| [생활코딩] 7강. 엘리먼트 제어 (0) | 2021.01.24 |
| [생활코딩] 5강. Chain & Traversing (0) | 2021.01.24 |
| [생활코딩] 4강. 선택자 (0) | 2021.01.24 |
| [생활코딩] 3강. wrapper (0) | 2021.01.24 |