[jQuery] 이벤트

on() 메소드

제이쿼리는 특정 요소에 이벤트를 연결하기 위해 .on() 메소드를 사용합니다.
.on() 메소드는 다음과 같은 특징을 가집니다.

1. 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있습니다.

   $("button").on("mouseenter mouseleave", function() {
     $("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
   })

2. 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있습니다.

   $("button").on({
     mouseenter: function() {
       $("#text").append("마우스가 버튼 위로 진입했어요!<br>");
     },
     click: function() {
       $("#text").append("마우스가 버튼을 클릭했어요!<br>");
     },
     mouseleave: function() {
       $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
     }
   })

3. 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있습니다.
4. 사용자 지정 이벤트를 위해 이벤트 핸들러로 데이터를 넘길 수 있습니다.
5. 차후에 다루게 될 요소를 이벤트에 연결할 수 있습니다.

.one() 메소드

.one() 메소드는 연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행되지 않습니다.
또한, 같은 이벤트에 대해 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용할 수 있습니다.

$("button").one("click", function() {
  // 모든 <button> 요소가 처음 클릭됐을 때에만 실행됨
  $("text").append("첫 번째 클릭이에요!<br>");
  // 모든 <button> 요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
  $(this).click(function() {
    $("#text").append("이 버튼을 벌써 클릭했네요!<br>");
  })
})

.off() 메소드

.off() 메소드는 더는 사용하지 않는 이벤트와의 연결을 제거합니다.

$("#clickBtn").on("click", function() {
  $("#text").append("버튼을 클릭했어요!<br>");
});
$("#removeBtn").on("click", function() {
  $("#clickBtn").off("click");
});