hoon's bLog

jQuery event handler object 이벤트 개념 및 처리 본문

IT/HTML, jQuery, Ajax

jQuery event handler object 이벤트 개념 및 처리

개발한기발자 2023. 7. 14. 09:44
반응형

이벤트의 개념

이벤트(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

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

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
'IT/HTML, jQuery, Ajax' Related Articles more