목차
- off() 예제 - on() 메서드로 부착한 이벤트핸들러 제거
- off() 정의
- off() 구문
- off() 예제1 - p요소에 on()메서드로 부착된 모든 click 이벤트 제거
- off() 예제2 - p요소에 on()메서드로 부착된 특정이벤트 제거
- off() 예제3 - event객체 사용해 이벤트핸들러 제거. (= 특정 횟수 후 이벤트제거)
off() 예제 - on() 메서드로 부착한 이벤트핸들러 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").on("click", function(){
$(this).css("background", "yellow");
});
$("button").click(function(){
$("p").off("click");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>글씨 클릭하면 색상 바뀜. (버튼 누르면 안 바뀜)</p>
<button>클릭</button>
결과보기
off() 정의
on() 메소드로 첨부된 이벤트핸들러 제거하는 데 가장 자주 사용 .
1.
jQuery 1.7 - unbind(), die(), undelegate() 메소드를 모두 대체.
2.
이 메서드 사용 권장.
(∵ API에 많은 일관성 제공해 jQ 코드베이스 단순화 시킴.)
3.
이벤트핸들러 제거하려면, 반드시 on() 메소드에 전달된 것과 완전 일치 요함.
4.
한 번만 실행 후 스스로 제거되는 이벤트 첨부하려면, one() 메소드 사용.
off() 구문
$(selector).off(event,selector,function(eventObj),map)
[매개변수]
event
필수. 선택요소에서 제거할 하나 이상의 event 또는 namespace 지정.
이벤트 값은 공백으로 구분. 유효한 이벤트여야 함.
selector
선택. 이벤트핸들러 첨부할 때 원래 on() 메소드에 전달된 것과 일치하는 이벤트선택자.
function(eventObj)
선택. 이벤트가 발생할 때 실행할 함수.
map
요소에 첨부할 하나 이상의 이벤트와 이벤트 발생시 실행할 함수를 포함하는 이벤트 맵
(예) {event : function, event : function, ...}
off() 예제1 - p요소에 on()메서드로 부착된 모든 click 이벤트 제거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=3px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=2px"});
}
$(document).ready(function(){
$("body").on("click", "p",changeSize);
$("body").on("click", "p", changeSpacing);
$("button").click(function(){
$("body").off("click", "p");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>글자 클릭하면 글자크기 및 간격 바뀜. (버튼 클릭 시 안 바뀜.)</p>
<button>클릭</button>
결과보기
off() 예제2 - p요소에 on()메서드로 부착된 특정이벤트 제거거
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=10px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=5px"});
}
$(document).ready(function(){
$("p").on("click", changeSize);
$("p").on("click", changeSpacing);
$("button").click(function(){
$("p").off("click", changeSize);
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>글자 클릭하면 글자크기 및 간격 바뀜. (버튼 클릭 시 클자크기는 안 바뀜.)</p>
<button>클릭</button>
결과보기
off() 예제3 - event객체 사용해 이벤트핸들러 제거. (= 특정 횟수 후 이벤트제거)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 0;
$("p").click(function(event){
$("p").animate({fontSize: "+=5px"
});
x++;
if (x >= 2) {
$(this).off(event);
}
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>글자 클릭 2번까지만 이벤트 적용. 클릭 3번 이상 시 이벤트 제거</p>
결과보기
