메인메뉴 바로가기

HOME으로 가기


Javascript

제이쿼리 | 제이쿼리 총정리(5) - 이벤트 핸들러

본문

이벤트(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()의 차이점 >

preventDefault()를 사용하여 <a> 태그의 기본 이벤트를 제거한다.

stopPropagation()를 사용하여 <div> 태그에 이벤트가 전달되는 것을 막는다. 


// 메소드 호출 없음

$("#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');         

});​ 

 

 

이벤트의 연결 및 처리 .on() .off() .one() 

 

<이벤트 핸들러를 바인딩하는 다양한 방법​>

$("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 });

$("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 });

$("#btn").on("click", function(event) { // 실행하고자 하는 jQuery 코드 });

$("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "#btn");

$("body").on("click", "#btn", function(event) { // 실행하고자 하는 jQuery 코드 });​ 

 

.one() 메소드는 바인딩(binding)된 이벤트 핸들러가 한번만 실행되고 나서는, 더는 실행되지 않는다. 

 

 

 


마우스 이벤트와 관련된 메소드
.click()자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.dblclick()자바스크립트의 "dblclick" 이벤트 핸들러를 연결되고, 해당 요소에 "dblclick" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.hover()자바스크립트의 "mouseenter"와 "mouseleave" 이벤트를 하나의 이벤트 핸들러와 연결되고, 해당 요소에 "mouseenter"와 "mouseleave" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mousedown()자바스크립트의 "mousedown" 이벤트 핸들러를 연결되고, 해당 요소에 "mousedown" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseenter()해당 요소 위로 마우스가 진입할 때 발생하는 이벤트가 이벤트 핸들러에 연결되고, 해당 요소에 마우스 진입 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseleave()해당 요소에서 마우스가 빠져나갈 때 발생하는 이벤트와 이벤트 핸들러에 연결되고, 해당 요소에 마우스가 빠져나가는 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mousemove()자바스크립트의 "mousemove" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "mousemove" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseout()자바스크립트의 "mouseout" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseover()자바스크립트의 "mouseover" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseover" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.mouseup()자바스크립트의 "mouseup" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "mouseup" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

 


키보드 이벤트와 관련된 메소드
.keydown()자바스크립트의 "keydown" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "keydown" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.keyup()자바스크립트의 "keyup" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "keyup" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.keypress()자바스크립트의 "keypress" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "keypress" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

 

< .keypress() 메소드 >

var i = 0;

$("input").keypress(function() {

  $("#text").text((++i) + "번 키보드가 눌렸습니다.");

}); 

 

 

 

 


입력 양식 이벤트와 관련된 메소드
.blur()자바스크립트의 "blur" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "blur" 이벤트를 발생시킴.
.change()자바스크립트의 "change" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "change" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.select()자바스크립트의 "select" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "select" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.submit()자바스크립트의 "submit" 이벤트가 이벤트 핸들러를 연결되고 해당 요소에 "submit" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focus()자바스크립트의 "focus" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focus" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focusin()"focusin" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "focusin" 이벤트가 발생되었을 때 설정한 함수가 실행된다.
.focusout()"focusout" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 "focusout" 이벤트가 발생되었을 때 설정한 함수가 실행된다.

 

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기