알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
[javascript,jQuery] 이벤트란? 본문
이벤트란?
- 시스템에서 일어나는 사건을 의미
- javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)
- 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
jQuery의 이벤트
- 크로스브라우징의 문제를 해결해줌(호환성 문제 해결)
- on으로 이벤트 핸들러를 설치하고,off 로 제거
- trigger로 이벤트 핸들러를 강제로 실행
- click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
- on를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function clickHandler(e){
alert('thank you');
}
$(document).on('ready', function(){
$('#click_me').on('click', clickHandler);
$('#remove_event').on('click', function(e){
$('#click_me').off('click', clickHandler);
});
$('#trigger_event').on('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>
$(document).on('ready', 문서 준비가 완료 되면 function() 을 실행 합니다.
$('#click_me').on('click', clickHandler); 는 <input id="click_me" 태그에 click 이벤트를 달아 줍니다.
$('#click_me').off('click', 는 off로 기존에 있던 click 이벤트 해제 해줍니다.
$('#click_me').trigger('click'); 강제로 클릭 이벤트를 실행 시킵니다.
이벤트 헬퍼
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.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').off('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>좀더 쉽게 이벤트를 달수 있다.
'Web > JQuery' 카테고리의 다른 글
| [jQuery ] 폼 이벤트 (0) | 2017.08.23 |
|---|---|
| [jQuery]엘리먼트 제어 (0) | 2017.08.23 |
| [jQuery] Chain이란? (0) | 2017.08.23 |
| JQuery 선택자 (0) | 2017.08.22 |
| javascript vs JQuery (0) | 2017.08.22 |
'Web /JQuery' Related Articles
more
Comments