jQuery 입문 | 이벤트 처리 | 이벤트의 개념(event handler, event object)
이벤트(event)란?
웹 페이지는 사용자와 수많은 상호작용을 하게 된다.
사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다.
이러한 사용자의 동작들이 모두 이벤트(event)를 발생시킨다.
즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.
이벤트 핸들러(event handler)
웹 페이지에서는 수많은 이벤트가 계속해서 발생한다.
특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다.
이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
다음 예제는 이벤트 핸들러를 작성하여 연결한 예제이다.
$("p").on({
mouseenter: function() {
$(this).css("background-color", "yellow");
},
mouseleave: function() {
$(this).css("background-color", "blue");
},
click: function() {
$(this).css("background-color", "red");
}
});
이벤트 객체(event object)
이벤트 핸들러 함수는 jQuery에서 콜백될 때 이벤트 객체(event object)를 함수의 인자로 전달된다.
전달받은 이벤트 객체를 이용하여 이벤트의 특성을 결정하거나, 이벤트의 기본 동작을 막을 수도 있다.
jQuery의 이벤트 객체는 W3C 표준 권고안을 따르는 이벤트 객체를 정규화한 것이다.
대표적으로 사용하는 것은 아래와 같습니다.
type: 이벤트 종류pageX: 브라우저 화면을 기준으로 한 마우스 X 좌표 위치pageY: 브라우저 화면을 기준으로 한 마우스 Y 좌표 위치preventDefault(): 기본 이벤트를 제거한다.stopPropagation(): 이벤트 전달을 제거한다.
더보기 - http://api.jquery.com/category/events/event-object/
아래 예제는 preventDefault() 메소드와 stopPropagation()의 차이점을 알수 있는 예제이다.
// 메소드 호출 없음
$("#text1").on("click", function(e){
$(this).css('color', 'green');
});
// preventDefault 메소드 호출
$("#text2").on("click", function(e){
$(this).css('color', 'green');
e.preventDefault();
});
// stopPropagation 메소드 호출
$("#text3").on("click", function(e){
$(this).css('color', 'green');
e.stopPropagation();
});
// 둘다 호출
$("#text4").on("click", function(e){
$(this).css('color', 'green');
e.preventDefault();
e.stopPropagation();
});
$("div").on("click", function(e){
$(this).css('background-color', 'yellow');
});
preventDefault()를 사용하여 <a> 태그의 기본 이벤트를 제거한다.
stopPropagation()를 사용하여 <div> 태그에 이벤트가 전달되는 것을 막는다.
참조
http://api.jquery.com/category/events/event-object/