티스토리 뷰
1. 이벤트란?
- 시스템에서 일어나는 사건을 의미
- javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다.(클릭, 마우스 이동, 타이핑, 페이지 로딩등)
- 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
2. jQuery의 이벤트
- 크로스브라우징의 문제를 해결해줌
- bind로 이벤트 핸들러를 설치하고, unbind로 제거(예제1)
- trigger로 이벤트 핸들러를 강제로 실행(예제1)
- click, ready와 같은 다양한 이벤트 헬퍼(helper)를 제공함(예제2)
- live를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음
- 예제1. bind, unbind, trigger를 이용한 이벤트의 설치, 제거, 호출
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제1.bind,unbind,trigger를 이용한 이벤트의 설치,제거,호출</title>
<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(){
$('#click_me').bind('click', clickHandler);
$('#remove_event').bind('click', function(e){
$('#click_me').unbind('click', clickHandler);
});
$('#trigger_event').bind('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>- 예제2. 이벤트 헬퍼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제2. 이벤트 헬퍼</title>
<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(){
$('#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를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제3. live를 이용하면 존재하지 않는 엘리먼트에 대해서 이벤트를 설치할 수 있다.</title>
<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);
$('#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>
더보기
<실행결과>
'Web > JavaScript jQuery' 카테고리의 다른 글
| [jQuery] 폼 (0) | 2020.01.09 |
|---|---|
| [jQuery] 엘리먼트의 제어 (0) | 2020.01.08 |
| [jQuery] chain (0) | 2020.01.07 |
| [jQuery] 선택자 (0) | 2020.01.06 |
| [jQuery] wrapper (0) | 2020.01.06 |