Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 코테
- 개발자 회고록
- Java
- 스프링 컨테이너
- Memoir
- 리눅스마스터1급
- 자바스크립트 코딩의 기술
- 코딩테스트
- 월간코드챌린지
- 백준 javascript
- 백준 java
- Kotlin
- JavaScript
- 문자열
- 자바
- map
- 리눅스마스터 3과목
- toCharArray
- 프로그래머스
- 스프링 빈
- 고잉버스
- 리눅스마스터 1급 정리
- java 백준 1차원 배열
- 명령어
- 리눅스
- 연습문제
- 카카오
- 반복문
- GoingBus
- Linux
Archives
- Today
- Total
hoon's bLog
jQuery event handler object 이벤트 개념 및 처리 본문
반응형
이벤트의 개념
이벤트(event)란?
- 오늘날 웹 페이지는 사용자가 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작을 수행
- 위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생
- 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미
이벤트 핸들러(event handler)
- 웹 페이지에서는 수많은 이벤트가 계속해서 발생
- 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결
- 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행
$(function() {
$("button").on({ // 모든 <button>요소에
mouseenter: function() { // mouseenter 이벤트를 설정함.
$("#text").append("마우스가 버튼 위로 진입했어요!<br>");
},
click: function() { // click 이벤트를 설정함.
$("#text").append("마우스가 버튼을 클릭했어요!<br>");
},
mouseleave: function() { // mouseleave 이벤트를 설정함.
$("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
}
});
});
이벤트 객체(event object)
- 이벤트 핸들러 함수는 이벤트 객체(event object)를 인수로 전달 가능
- 이렇게 전달받은 이벤트 객체를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본 동작을 막을 수 있음
- 제이쿼리의 이벤트 객체는 W3C 표준 권고안을 따르는 이벤트 객체를 정규화한 것
이벤트의 연결(event binding)
- 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 하고 이렇게 작성된 이벤트핸들러를 특정 요소에 연결하는 것
- 제이쿼리 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 연결
$("#btn").click(function(event) { // 실행하려는 제이쿼리 코드 });
$("#btn").bind("click", function(event) { // 실행하려는 제이쿼리 코드 });
$("#btn").on("click", function(event) { // 실행하려는 제이쿼리 코드 });
$("body").on({click: function(event) { // 실행하려는 제이쿼리 코드 }}, "#btn");
$("body").on("click", "#btn", function(event) { // 실행하려는 제이쿼리 코드 });
$(function() {
$("body").on({ // <body>요소에
click: function() { // click 이벤트가 발생했을 때
$("#text").html("버튼을 클릭했습니다!");
}
}, "#btn"); // id가 "btn"인 요소에 이벤트 핸들러를 등록함.
});
이벤트 처리의 발전
- 제이쿼리 1.0에서는 .bind() 메소드를 사용하여 이벤트 핸들러를 등록
- 그 다음에는 .live() 메소드와 .delegate() 메소드를 거쳐, 현재는 .on() 메소드를 이용하여 이벤트를 처리
.on()
- 제이쿼리는 특정 요소에 이벤트를 연결(event binding)
- 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결 가능
제이쿼리 1.7부터 소개된 .on() 메소드 특징
- 선택한 요소에 어떤 타입의 이벤트라도 연결 가능
- 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결 가능
- 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결 가능
- 사용자가 지정한 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘김.
- 차후에 다루게 될 요소를 이벤트에 연결 가능
$(function() {
// 모든 <button>요소에 mouseenter와 mouseleave 이벤트를 설정함.
$("button").on("mouseenter mouseleave", function() {
$("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
});
});
// 또한, 하나의 요소에 여러 개의 이벤트 핸들러를 사용하여 여러 개의 이벤트를 같이 연결가능
$(function() {
$("button").on({ // 모든 <button>요소에
mouseenter: function() { // mouseenter 이벤트를 설정함.
$("#text").append("마우스가 버튼 위로 진입했어요!<br>");
},
click: function() { // click 이벤트를 설정함.
$("#text").append("마우스가 버튼을 클릭했어요!<br>");
},
mouseleave: function() { // mouseleave 이벤트를 설정함.
$("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
}
});
});
.one()
- .on() 메소드와 같은 인수를 전달, 따라서 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 가질 수 있음
- 연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행 X
- 또한, 같은 이벤트에 대해 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용 가능
$(function() {
$("button").one("click", function() {
// 모든 <button>요소가 처음 클릭됐을 때에만 실행됨.
$("#text").append("첫 번째 클릭이에요!<br>");
// 모든 <button>요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
$(this).click(function() {
$("#text").append("이 버튼을 벌써 클릭했습니다!<br>");
});
});
});
.off() : 더이상 사용하지 않는 이벤트와 연결 제거
$(function() {
$("#clickBtn").on("click", function() { // id가 "clickBtn"인 요소를 클릭했을 때 실행됨.
$("#text").append("버튼을 클릭했어요!<br>");
});
$("#removeBtn").on("click", function() {
$("#clickBtn").off("click"); // id가 "clickBtn"인 요소의 클릭 이벤트와의 연결을 제거함.
});
});
Reference
https://www.tcpschool.com/jquery/jq_event_concept
728x90
반응형
'IT > HTML, jQuery, Ajax' 카테고리의 다른 글
jQuery effect 제이쿼리 이펙트 효과 (2) | 2023.07.18 |
---|---|
jQuery event delegation propagation 이벤트 위임 전파 버블링 (0) | 2023.07.17 |
jQuery class 클래스 속성 설정 및 클래스 메서드 (0) | 2023.07.13 |
jQuery attr prop, 속성 프로퍼티 설정 (1) | 2023.07.13 |
jQuery element area 요소의 영역 (2) | 2023.07.12 |