.on(click) 메소드 jquery .click 이벤트 여러개 클릭 2개 이상 다중event 부모에게 전파 중지 .preventDefault() .stopPropagation() .stopImmediatePropagation() 자바스크립트

jQuery 이벤트 바인딩과 그 외의 메소드들

안녕하세요, 여러분! 오늘은 이벤트 바인딩과 관련된 메소드들에 대해 자세히 살펴볼 것입니다.

이벤트 바인딩이란 특정 HTML 요소에서 일어나는 행동에 대해 반응하도록 코드를 작성하는 것인데요.

이벤트 핸들러라는 함수를 작성하고 이것을 요소에 연결하는 것을 말합니다.

이벤트 바인딩의 변천사

jQuery가 발전함에 따라 이벤트를 처리하는 방법도 변해왔습니다. 초기의 jQuery 1.0에서는 .bind() 메소드를 사용하여 이벤트 핸들러를 등록했고, 그 이후 .live() 메소드와 .delegate() 메소드를 거쳐 현재는 .on() 메소드를 주로 사용하게 되었습니다. .on() 메소드는 jQuery 1.7부터 소개되었으며, 이전에 사용되던 .bind()나 .click() 메소드들도 내부적으로는 .on() 메소드를 이용하게 되었습니다.

.on() 메소드

.on() 메소드는 우리가 특정 요소에 대해 어떤 이벤트가 일어났을 때 어떻게 반응할지를 결정하는 메소드입니다.

예를 들어, 다음과 같은 코드는 "btn"이라는 id를 가진 요소에 클릭 이벤트 핸들러를 연결합니다.

$("element").on("click", function(event) {
  // 실행할 코드
});

.on() 메소드의 장점은 다음과 같습니다:

• 어떤 타입의 이벤트라도 선택한 요소에 연결할 수 있습니다.
• 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있습니다.
• 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있습니다.
• 사용자 지정 이벤트를 위해 이벤트 핸들러로 데이터를 넘길 수 있습니다.
• 차후에 다루게 될 요소를 이벤트에 바인딩할 수 있습니다.
• 가상 DOM에 접근이 가능합니다. jQuery 동적 click 이벤트

예를 들어, 하나의 이벤트 핸들러에 두 개의 이벤트를 동시에 연결하려면 아래와 같이 작성할 수 있습니다.

$("#btn1").on("mouseenter mouseleave", function() {
  $("#div1").append("마우스 커서가 DIV 위로 들어오거나 빠져 나갔습니다.");
});

하나의 버튼 요소에 jquery click 이벤트 뿐 만 아니라 여러개 이벤트를 다음과 같이 바인딩 해 둘 수 있습니다.

자바스크립트 다중 이벤트는 단순 나열인데 반해서 제이쿼리는 깔끔합니다.

작성자는 편하죠. 제이쿼리가 느려서 문제지...

$("#btn2").on({ 
  click: function() {
    $("#div2").append("영역 클릭 이벤트 발생");
  },
  mouseenter: function() {
    $("#div2").append("마우스 영역 진입 이벤트 밠생");
  },
  mouseleave: function() {
    $("#div2").append("마우스 영역 탈출 이벤트 밠생");
  }
});

on으로 이벤트 바인딩하지 않은 jQuery 클릭이벤트를 이용하면 .append()로 추가한 가상DOM에서는 클릭 이벤트 적용이 되지 않습니다. 이런 경우에도 .on()메소드를 사용하면 동작합니다.

TIP: 이렇게 동적 생성되는 DOM요소에 클릭이벤트 2개 이상이 생성되면 클릭이벤트가 여러번 실행되는 현상이 생기기 때문에 다음에 설명할 .off()메소드로 return false를 넘깁니다.

$("#id").off().on('click', id, function() {}

.off() 메소드

.off() 메소드는 이벤트 핸들러를 요소에서 분리하거나 해제하는 역할을 합니다. 이를 통해 더 이상 필요 없는 이벤트와의 연결을 쉽게 끊을 수 있습니다.

$("#btn3").on("click", function() {
  alert("버튼을 클릭했습니다.");
});
$("#btn3Bind").on("click", function() {
  $("#btn3").on("click").text("버튼 클릭 가능");
});
$("#btn3Unbind").on("click", function() {
  $("#btn3").off("click").text("버튼 클릭 불가능");
});

.one() 메소드

.one() 메소드는 한 번만 실행되는 이벤트 핸들러를 만드는 데 사용됩니다.

이 메소드에 바인딩된 이벤트 핸들러는 한 번만 실행되고 나서는 더 이상 실행되지 않습니다.

$("#btn4").one("click", function() {
  $("#btn4").append("한번만 클릭 가능합니다.");
});

이벤트 바인딩 메소드 비교표

메소드	설명
.on()	특정 요소에 이벤트 핸들러를 연결합니다. 여러 개의 이벤트를 동시에 연결하는 것도 가능하며, 사용자 지정 이벤트를 위해 데이터를 넘기는 것도 가능합니다.
.off()	특정 요소에서 이벤트 핸들러를 해제합니다.
.one()	특정 요소에 한 번만 실행되는 이벤트 핸들러를 연결합니다.

제이쿼리 이벤트 부모요소로 전파 방지

html문서는 element 요소가 둥둥 떠 있는 것이 아닙니다.

반드시 다른 부모 요소위에 기반하고 있습니다.

즉 중첩된 형태로 요소들이 배치돼 있는데, 과연 우리는 무엇을 클릭했고, 무엇 위에 있는가?

당연히 우리 상식으로는 최상단의 요소에만 이벤트가 전해질 것 같지만 실제로는 그렇지 않습니다.

다음의 예제에서 영역을 클릭해보면 명확하게 차이를 인지하실 것입니다.

분명 SPAN영역을 클릭했지만, P영역도 DIV영역도 클릭이 일어나는 이벤트 전파가 일어났습니다.

이런 전파를 막기 위한 조치가 바로 아래에 설명할 메소드들입니다. 제쿼리 뿐만 아니라 자바스크립트에서도 동일하게 사용됩니다.

• .stopPropagation() : 현재이벤트가 부모로 전파되는 것 중지
• .preventDefault() : 현재 이벤트 기본동작 중지
• stopImmediatepropagation(): 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다.
• return false; : .stopPropagation() 과 .preventDefault() 동시 사용한 효과

먼저 .stopPropagation()의 예제입니다.

SPAN영역만 클릭하면 SPAN클릭만 뜨는 것을 확인할 수 있습니다.

P영역에는 .stopPropagation를 사용하지 않아서 DIV영역까지 클릭이벤트가 전파되는 것을 확인할 수 있을 것입니다.

.stopPropagation()를 사용하면 해당 이벤트의 전파만 막습니다.

이 글의 주제가 클릭이벤트 여러개를 사용했을 때에 관한 것입니다.

.stopImmediatepropagation()를 사용해보았습니다.

//SPAN 영역에 첫번째 클릭 이벤트 설정
$("#span_").on("click",function(event){
    $("#console").append("<br>SPAN 클릭1");
    
    //상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단한다.
    event.stopImmediatePropagation();
});

//SPAN 영역에 두번째 클릭 이벤트 설정
$("#span_").on("click",function(event){
    $("#console").append("<br>SPAN 클릭2");
});

위의 코드처럼 #span_에 2개의 .on(click)이벤트를 선언했습니다.

클릭이벤트가 2개가 걸려있지만, .stopImmediatepropagation()가 선언된 이벤트만 실행됐습니다. 다른 클릭이벤트로 전파가 방지된 것이죠. 그리고 이 것은 코딩 순서가 중요합니다. 만약 두번째 이벤트가 먼저 선언되면, 이 글은 제일 처음으로 돌아갑니다. DIV영역까지 이미 클릭이벤트가 전파되는 것이죠.

그럼 .preventDefault()는 왜 쓰는 걸까요?

이 번에는 A태그에 사용해 보겠습니다. A태그는 링크죠. 링크페이지가 열리는 동작이 Default 기능입니다.

그런데 A태그에 preventDefault를 사용하면, 원래 요소가 가지고 있던 기능을 묵살하고, 선언한 동작을 할 때 사용하는 것입니다.

링크는 열리지 않고, 결과 콘솔에 append동작을 합니다. 

그리고 원하는 동작 선언 후 return false를 사용하면, 링크페이지도 열리지않고, 상위 돔으로 이벤트 전파가 일어나지 않습니다.

적절하게 사용하면 더 많은 기능을 하게 될 것입니다.

위 내용을 통해 jQuery에서 제공하는 이벤트 바인딩 메소드들의 사용법과 기능을 자세히 알아보았습니다. jQuery는 이외에도 많은 기능과 메소드를 제공하고 있으니, 다양한 기능들을 활용해보시면 웹 개발이 더욱 편리해질 것입니다. 다음에는 jQuery의 다른 기능들에 대해 함께 알아보도록 하겠습니다. 그럼, 행복한 코딩 되세요!