안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* 이벤트란?
- 시스템에서 일어나는 사건을 의미
- 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(){
$('#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>- $('#click_me')를 적으면 아래의 input id="click_me"엘리먼트에 대한를 래핑 해주게 된다.
하지만 화면을 구성하는 순서가 위에서 아래인데, 위의 내용이 버튼 엘리먼트가 화면에 로드되기 전에 이벤트를 선언한 것이기 때문에, 좀 더 안전하게 화면에 잘 구현되게 하기 위해서 bind('ready') 즉, bind 메소드를 사용한 것이다.
- function(e){
$('#click_me').trigger('click');
}
+ 한 번 실행되고 재활용되지 않는 함수는 익명함수를 주로 사용한다.
- bind와 unbind(이벤트 삭제)의 실행시 인자가 동일해야 오류없이(다시 클릭했을 때 alert창이 뜨지 않음) 이벤트가 잘 전달된다.
- trigger이라는 메소드는 그 메소드의 인자로 호출된(click이라는 이름을 가진) 이벤트 타입에 해당되는 이벤트들을 호출하게 되는 강제로 실행해주는 것이다.
예제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(){
$('#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>예제1과 결과는 동일하지만 살짝 로직만 다르다.
예제2는 bind대신 ready를 사용했다.
bind를 활용하는 것보다 ready를 사용하는 것이 좀 더 경제적이고 직관적인 코드이기 때문에 좀 더 많이 사용된다.
예제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);
$('#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>예제1과 결과는 동일하지만 살짝 로직만 다르다.
현재 화면상에 존재하지 않는 엘리먼트일지라도 이벤트를 설치할 수 있고, 이후에 엘리먼트를 만들게 되면 이벤트가 적용된다. 하지만 live의 잠재적인 위험사항이 존재하여 되도록 bind, ready 메소드를 사용하는 것이 좋다.
https://api.jquery.com/category/events/
Events | jQuery API Documentation
Attach a handler to an event for the elements. Bind an event handler to the “blur” event, or trigger that event on an element. Bind an event handler to the “blur” event, or trigger that event on an element. Bind an event handler to the “change”
api.jquery.com
위의 링크를 통해 다양한 이벤트 내용을 확인할 수 있다.
다음글>>
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 7. manipulation 엘리먼트 제어
+ 아래의 링크를 참고하여 공부하였습니다.
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 8. Form 폼 (0) | 2023.07.09 |
|---|---|
| JQUERY - 7. manipulation 엘리먼트 제어 (0) | 2023.07.09 |
| JQUERY - 5. Chain (0) | 2023.07.09 |
| JQUERY - 4. 선택자 (0) | 2023.07.09 |
| JQUERY - 3. wrapper (0) | 2023.07.09 |
