제이쿼리는 특정 요소에 이벤트를 연결하기 위해 .on() 메소드를 사용합니다.
.on() 메소드는 다음과 같은 특징을 가집니다.
$("button").on("mouseenter mouseleave", function() {
$("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
})
$("button").on({
mouseenter: function() {
$("#text").append("마우스가 버튼 위로 진입했어요!<br>");
},
click: function() {
$("#text").append("마우스가 버튼을 클릭했어요!<br>");
},
mouseleave: function() {
$("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
}
})
.one() 메소드는 연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행되지 않습니다.
또한, 같은 이벤트에 대해 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용할 수 있습니다.
$("button").one("click", function() {
// 모든 <button> 요소가 처음 클릭됐을 때에만 실행됨
$("text").append("첫 번째 클릭이에요!<br>");
// 모든 <button> 요소가 두 번째 클릭됐을 때부터는 이 이벤트 핸들러가 실행됨.
$(this).click(function() {
$("#text").append("이 버튼을 벌써 클릭했네요!<br>");
})
})
.off() 메소드는 더는 사용하지 않는 이벤트와의 연결을 제거합니다.
$("#clickBtn").on("click", function() {
$("#text").append("버튼을 클릭했어요!<br>");
});
$("#removeBtn").on("click", function() {
$("#clickBtn").off("click");
});