목차
- unbind() 예제 - 이벤트 핸들러 제거..
- unbind() 정의
- unbind() 구문
- unbind() 예제 - 지정 함수 실행 차단.
- unbind() 예제 - 이벤트 객체 스스로 이벤트 제거.
unbind() 예제 - 이벤트 핸들러 제거.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$("p").unbind();
});
});
</script>
<p>홈짱닷컴 Homzzang.com.</p>
<p>글자 클릭하면 사라짐. </p>
<p>아래 버튼 누르면 안 사라짐.</p>
<button>클릭</button>
결과보기
unbind() 정의
선택 요소에서 이벤트 핸들러 제거.
1.
jQuery 3.0 - 폐기예고. off() 메서드로 대체.
2.
모든/지정 요소의 이벤트 핸들러 제거하거나 특정 함수 실행 차단에 사용.
3.
이벤트 객체 사용해 이벤트 핸들러 바인딩 해제 가능.
이벤트가 특정 횟수만큼 트리거 된 후 이벤트 핸들러를 제거하는 것처럼,
자체적으로 이벤트 바인딩 해제하는 데 사용.
4.
매개변수 지정 안 된 경우 지정 요소에서 모든 이벤트 핸들러를 제거함.
5.
jQuery로 연결된 모든 이벤트 핸들러에서 작동.
unbind() 구문
$(selector).unbind(event,function,eventObj)
[매개변수]
event
선택. 요소에서 제거할 하나 이상의 이벤트 지정.
※ 이 매개변수만 지정된 경우, 지정 이벤트에 묶인 모든 함수가 제거됨.
function
선택. 제거할 「이벤트 발생 시 실행될 함수」지정.
eventObj
선택. 사용 위해 제거할 이벤트 객제 지정.
※ 이벤트 바인딩 함수에서 가져옴.
unbind() 예제 - 지정 함수 실행 차단.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
$(document).ready(function(){
$("p").click(homzzang);
$("button").click(function(){
$("p").unbind("click", homzzang);
});
});
</script>
<p>홈페이지 제작관리 강의</p>
<p>그누보드5/영카트5 강의</p>
<button>클릭</button>
결과보기
unbind() 예제 - 이벤트 객체 스스로 이벤트 제거.
※ 2번째 클릭까지만 글자 크기 커짐. 그 후로는 안 커짐.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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).unbind(event);
}
});
});
</script>
<p style="font-size:20px;">홈짱닷컴 Homzzang.com</p>
결과보기
