목차
- undelegate() 예제 - 글자 클릭 시 사라지는 이벤트 막기.
- undelegate() 정의
- undelegate() 구문
- undelegate() 예제 - 모든 이벤트 막기.
- undelegate() 예제 - 특정 함수 실행만 막기.
undelegate() 예제 - 글자 클릭하면 사라지는 이벤트 막기.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").delegate("p", "click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("body").undelegate();
});
});
</script>
<p>홈짱닷컴 Homzzang.com.</p>
<p>글자 클릭 시 사라짐. (버튼 클릭 시 안 사라짐)</p>
<button>클릭</button>
결과보기
undelegate() 정의
delegate() 메서드로 추가된 하나 이상의 이벤트 핸들러 제거.
jQuery 3.0 - 폐기예고. off() 메서드로 대체됨.
undelegate() 구문
$(selector).undelegate(selector,event,function)
[매개변수]
selector
필수. 이벤트 핸들러 제거할 선택자 지정.
event
필수. 핸들러 함수 제거할 한 개 이상의 이벤트 지정.
function
필수. 제거할 이벤트 핸들러 함수 지정.
undelegate() 예제 - p 요소에 걸린 모든 이벤트 제거.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=10px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=5px"});
}
$(document).ready(function(){
$("body").delegate("p", "click", changeSize);
$("body").delegate("p", "click", changeSpacing);
$("button").click(function(){
$("body").undelegate("p", "click");
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<p>그누보드5/영카트5 강의</p>
<button>클릭</button>
결과보기
undelegate() 예제 - p 요소에 걸린 특정 함수 실행 막기.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeSize() {
$(this).animate({fontSize: "+=10px"});
}
function changeSpacing() {
$(this).animate({letterSpacing: "+=5px"});
}
$(document).ready(function(){
$("body").delegate("p", "click", changeSize);
$("body").delegate("p", "click", changeSpacing);
$("button").click(function(){
$("body").undelegate("p", "click", changeSize);
});
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<p>그누보드5/영카트5 강의</p>
<button>클릭</button>
결과보기