Maison >interface Web >js tutoriel >Comment dissocier des événements dans jquery ?
Comment dissocier des événements dans jquery ?
- 青灯夜游original
- 2020-11-26 10:02:464119parcourir
Méthodes pour dissocier les événements : 1. Utilisez les méthodes unbind() et undelegate() pour dissocier les événements liés respectivement par les méthodes bind() et délégué() ; 2. Utilisez la méthode off(), vous pouvez débloquer événements liés par les méthodes on(), bind() et délégué().
L'environnement d'exploitation de ce tutoriel : Système Windows 7, jQuery version 1.7 Cette méthode convient à toutes les marques d'ordinateurs.
Recommandations associées : "Tutoriel vidéo jQuery" Après avoir lié un événement, lorsque le traitement de l'événement n'est plus nécessaire à un certain moment, l'événement lié peut être dissocié. jQuery fournit les méthodes unbind() et undelegate(), qui sont utilisées respectivement pour dissocier les événements liés par les méthodes bind() et délégué(). Spécifiez simplement les événements liés qui doivent être déliés via les paramètres. Lorsque la méthode ne fournit pas de paramètres, cela signifie dissocier tous les événements de l'élément.
La méthode off() est fournie dans jQuery1.7+, qui est utilisée pour débloquer les événements liés par les méthodes on(), bind() et délégué(). La méthode off() est exactement la même que on. Exemple : événement de déliaison<!doctype html><html>
<head>
<meta charset="utf-8">
<title>jQuery基本操作事件绑定</title>
<script type="text/javascript" src="js/jquery-1.7.js"> </script>
<style type="text/css">
p{width:200px;height:200px;border:1px solid #666;}
#leftp{float:left; margin:0 auto;}
#rightp{float:right;}
</style>
</head>
<body>
<p id="leftp">
<input type="button" value="bind事件绑定" id="bindBtn"/>
<input type="button" value="多事件绑定" id="manyBindBtn"/>
<input type="button" value="delegate事件绑定" id="delegateBindBtn"/>
<input type="button" value="解除事件绑定" id="removeBindBtn"/>
</p>
<p id="rightp">右侧展示区</p>
<script type="text/javascript">
$(function(){
//使用bind()方法绑定事件
$("#manyBindBtn").bind({
click:function(){$("#rightp").slideToggle();},
mouseover:function(){$("#rightp").css("background-color","red");},
mouseout:function(){$("#rightp").css("background-color","yellow");}
});
//使用delegate()方法绑定事件
$(document).delegate("#delegateBindBtn","click",function(){
$("#rightp").slideToggle();
});
//使用hover()方法绑定事件
$("#rightp").hover(function(){
$(this).css("background-color","gray");
},function(){
$(this).css("background-color","white");
});
//使用on()方法绑定事件
$("#leftp").on("click","#bindBtn", function(){
alert("使用bind()方法绑定事件处理");
});
//解除事件绑定
$("#removeBindBtn").on("click",function(){
//1.使用unbind()解除click事件绑定
//$("#manyBindBtn").unbind("click");
//2.使用unbind()解除该元素上的所有事件绑定
//$("#manyBindBtn").unbind();
//3.使用off()方法解除bind()方法的click事件绑定
$("#manyBindBtn").off("click");
//$(document).off("click","#manyBindBtn");
//4.使用off()方法解除该元素上的所有事件绑
//$("#manyBindBtn").off();
//5.使用undelegate()方法解除delegate()方法绑定事件
//$(document).undelegate("#delegateBindBtn","click");
//6.使用off()方法解除delegate()方法绑定事件
$(document).off("click","#delegateBindBtn");
//7.使用off()方法解除on()方法的click事件绑定
$("#leftp").off("click","#bindBtn");
//8.使用off()方法解除所有按钮上的所有事件绑定
$("input[type=button]").off();
});
});
</script>
</body></html>
Cours de programmation
! !Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!