반응형
저번 편에서는 selector 선택자에 대해 알아보았다. 이번 편에서는 jQuery event에 대해 알아볼 것이다. 시스템에서 일어나는 사건이 바로 제이쿼리 이벤트이다.
jQuery 이벤트란?
- 이벤트는 시스템에서 일어나는 사건을 의미한다.
- javascript나 jQuery에게 이벤트란 브라우저에서 일어나는 사건을 의미한다.
(클릭, 마우스 이동, 타이핑, 페이지 로딩등) - 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려주면, 이벤트가 발생했을 때 시스템이 그 로직을 호출한다.
jQuery event의 특징
- 크로스브라우징의 문제를 해결해줌 (브라우저 마다 각각 이벤트를 설치하는 api가 다름. 이것을 해결해줌)
- on로 eventHandler를 설치하고, off로 제거 (예제1)
- trigger로 eventHandler를 강제로 실행 (예제2)
- click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함
1. on, off, trigger를 이용한 이벤트의 설치, 제거, 호출
- trigger은 click me 버튼에 설치되어 있는 event를 호출해 주는 역할을 한다. 이런 것을 trigger라고 한다.
- off 라는 method가 있는데 클릭한 후, click me를 클릭하면 event가 실행되지 않는다. click me 버튼에 설치되어 있었던 event를 off 시켜서(엮여있던 것들을 해제해서) evnet를 삭제했다.
- wrapper가 실행되고 인자로 document라는 객체가 전달된다.
- document는 웹페이지 자체를 의미하는 element 객체이다.
- $(document) 라는 wrapper가 만들어지고, on이라는 method를 호출하고 있다.
- on은 event를 설치할 때 사용하는 method이다.
- 문서가 다운로드가 끝나서 input 버튼들이 화면에 온저하게 표시가되면 ready라는 event가 실행이 된다. 그러면
브라우저는 뒤에 전달되는 함수들을 호출한다. - 브라우저는 위에서 아래로 해석한다. 하지만 jQuery가 input 버튼 코드들 보다 위에 있다. 이럴 경우 실행이 안된다. 그래서 ready는 웹의 모든 element들이 먼저 들어와 있는 것을 확인하고 나머지 코드를 실행 해준다.
- click me 라는 element에게 click이라고 하는 event 타입을 설치한다. 버튼을 click 했을 때 발생하는 event이다.
- clickHandler 라는 함수는 위쪽에 선언이 되어있다. 내부적으로는 alert 시간 method를 사용하고 있고, 인자로는
'thank you' 를 전달하고 있다. - on 이라는 method를 실행했고, 인자로 event 타입 click을 전달 했고, 이 click event가 발생했을 때 clickHandler가
실행이 되면서 alert도 실행되는 것이다. - function(e)는 익명 함수이다. event를 설치할 때 사용하는 여러 로직들은 보통 재활용 되지 않는 경우가 많기 때문에 익명 함수를 사용 하는 것이 편리하다.
- id 값이 click_me 라는 element에 wrapper를 만들었다.
- off 라는 method는 어떤 element에 설치되어 있는 이벤트를 제거할 때 쓴다.
- 이벤트를 제거할 경우, 어떤 event의 타입, Handler인지를 정확하게 지정해야 정확하게 삭제가 가능하다.
- element 에 설치되어 있는 event 중에 click 이라고 하는 event 타입을 가지고 있는 event를 호출해라(trigger)해라.
- 이 trigger 라는 method로 강제로 clickHandler를 호출할 수 있다. method의 인자로 전달된 event 타입에 해당되는
event들을 호출.
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script type="text/javascript">
function clickHandler(e){
alert('thank you');
}
$(document).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="off" />
<input id="trigger_event" type="button" value="trigger" />
</body>
</html>2. event 헬퍼
- 1번이랑 결과는 동일하되 코드는 약간 다르다.
- 1번에서는 1 번째 인자로 event 타입, 2 번째 인자로 eventHandler를 설치했다.
- ready 라는 함수 method를 이용해서 첫 번째 인자로 바로 eventHandler를 설치할 수 있다.
- 간결하고 좀 더 경제적인 코딩을 위해 제공되는 기능이어서 '헬퍼'라고 부른다
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/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>참고할 사이트
Events | jQuery API Documentation
Attach a handler to an event for the elements. Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event han
api.jquery.com
이전글 보고오기
반응형
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [생활코딩] jQuery 폼(form) 이란? (0) | 2021.06.27 |
|---|---|
| [생활코딩] jQuery를 이용해서 HTML element 제어하는 방법 (0) | 2021.06.13 |
| [생활코딩] jQuery chain 이란? (0) | 2021.06.09 |
| [생활코딩] jQuery 선택자(selector)란? (0) | 2021.06.08 |
| [생활코딩] jQuery 레퍼(wrapper)란? (0) | 2021.06.07 |
