728x90
자바스크립트의 addEventListener 과 같은 기능을 하는 on과 off - bind 와 unbind에 대해 정리하였다.
.bind() / .unbind()
.bind
jquery의 이벤트 설정 메서드
.unbind
jquery의 이벤트 해제 메서드
<script>
$("#a_click").click(function() {
alert("click event");
});
// unbind로 기존 click 이벤트 해제
$("#a_click").unbind("click"); // click 이벤트만 해제
//$("#a_click").unbind(""); // 전체 해제
// bind로 이벤트 등록
$("#a_click").bind("click", function() {
alert("click event2");
});
</script>
<a href="javascript;;" id="a_click">click!</a>
아래와 같이 unbind와 bind를 한 번에 사용할 수도 있다.
<script>
$("#a_click").click(function() {
alert("click event");
});
// 기존 click 이벤트 해제 후 등록
$("#a_click").unbind("click").bind("click", function() {
alert("click event2");
});
</script>
<a href="javascript;;" id="a_click">click!</a>
jquery 1.7부터 bind/unbind가 개선되어 나온 것이 on/off 메서드이다.
jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩한다.
.on()
jQuery는 특정 요소에 이벤트 바인딩(event binding)하기 위해 .on() 메소드를 사용한다. jQuery 1.7부터 소개된 .on() 메소드는 다음과 같은 특징을 가진다.
- 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
- 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.
- 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.
- 사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
- 차후에 다루게 될 요소를 이벤트에 바인딩할 수 있다.
기본형
$("p").on("click", function(){
alert("문장이 클릭되었습니다.");
});
이벤트 핸들러 하나에 이벤트를 여러개 설정
$("p").on("mouseenter mouseleave", function() {
$("div").append("마우스 커서가 문장 위로 들어오거나 빠져 나갔습니다.<br>");
});
.off() 메소드
.off() 메소드는 더 이상 사용하지 않는 이벤트와의 바인딩(binding)을 제거한다.
$("#btn").on("click", function() {
alert("버튼을 클릭했습니다.");
});
$("#btnBind").on("click", function() {
$("#btn").on("click").text("버튼 클릭 가능");
});
$("#btnUnbind").on("click", function() {
$("#btn").off("click").text("버튼 클릭 불가능");
});
정리 출처 : https://ggmouse.tistory.com/462
https://araikuma.tistory.com/626
728x90
'STUDY > jQuery' 카테고리의 다른 글
[jQuery] 추가메서드 .append .prepend() .appendTo() .prepend() (0) | 2022.12.28 |
---|---|
[jQuery] 객체합치기 .extend() (0) | 2022.12.28 |
[jQuery] innerHTML innerText기능 사용하기 .html() .text() (0) | 2022.12.28 |
[EasyUI] DataGrid / Layout / Link Button / Massager (0) | 2022.12.21 |
[jQuery] 제이쿼리 기초 animate()·stop() (0) | 2022.10.05 |