méthode jquery off()-js tutoriel-php.cn

La fonction

off() permet de supprimer un ou plusieurs événements liés à un élément Fonction de gestion des événements . La fonction

off() est principalement utilisée pour débloquer la fonction de traitement d'événements liée par la fonction on().

Cette fonction appartient à l'objet jQuery (instance).

Syntaxe

jQuery 1.7 Ajout de cette fonction. Il a principalement les deux formes d'utilisation suivantes :

Utilisation un :

jQueryObject.off( [ events [, selector ] [, handler ] ] )

Copier après la connexion

Utilisation deux :

jQueryObject.off( eventsMap [, selector ] )

Copier après la connexion

Paramètres

Paramètre Description

événements

参数	描述
events	可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数`events`)，属性值对应绑定的事件处理函数(参数`handler`)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为`null`或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
handler	可选/Function类型指定的事件处理函数。

Facultatif/Type de chaîne un ou plusieurs types d'événements séparés par des espaces et facultatif Espace de noms

, tel que "clic", "clic focus", "keydown.myPlugin". off()

eventsMap

selectorObjet de type un Objet Object events, chacun de ses attributs correspond au type d'événement et à l'espace de noms facultatif (paramètre handler), et la valeur de l'attribut correspond à la fonction de traitement d'événement liée (paramètre

) .

sélecteur

selectorFacultatif/Type de chaîne Un sélecteur jQuery utilisé pour spécifier quels éléments descendants peuvent déclencher des événements liés. Si ce paramètre est null ou omis, cela signifie que l'élément actuel lui-même est lié à l'événement (le déclencheur réel peut également être un élément descendant, tant que le flux d'événements peut atteindre l'élément actuel) .

gestionnaire

Fonction facultative/de gestion d'événements spécifiée par type de fonction. La fonction selector

supprimera le gestionnaire d'événement de l'événement handler lié à l'élément descendant

sur la correspondance actuelle élément Fonction

Si le paramètre

est omis, le gestionnaire d'événements lié à n'importe quel élément est supprimé.

off()Le paramètre doit être cohérent avec le sélecteur transmis lors de l'ajout d'une liaison via la fonction on(). Si le paramètre est omis, tous les gestionnaires d'événements liés au type d'événement spécifié de l'élément spécifié seront supprimés.

Si tous les paramètres sont omis, cela signifie supprimer tous les gestionnaires d'événements de tout type d'événement liés à n'importe quel élément de l'élément actuel. off()Valeur de retour

La valeur de retour de la fonction

est de

type jQuery, renvoyant lui-même l'objet jQuery actuel.

<span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btn1"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"点击1"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"btn2"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"button"<span class="pln"> <span class="atn">value<span class="pun">=<span class="atv">"点击2"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"><a<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"a1"<span class="pln"> <span class="atn">href<span class="pun">=<span class="atv">"#"<span class="tag">><span class="pln">CodePlayer<span class="tag"></a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copier après la connexion

off()En fait, les paramètres de la fonction

<span class="kwd">function<span class="pln"> btnClick1<span class="pun">(){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> <span class="kwd">this<span class="pun">.<span class="pln">value <span class="pun">+<span class="pln"> <span class="str">"-1"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="pun">}<span class="pln"><br/><br/><span class="kwd">function<span class="pln"> btnClick2<span class="pun">(){<span class="pln"><br/>    alert<span class="pun">(<span class="pln"> <span class="kwd">this<span class="pun">.<span class="pln">value <span class="pun">+<span class="pln"> <span class="str">"-2"<span class="pln"> <span class="pun">);<span class="pln"><br/><span class="pun">}<span class="pln"><br/><br/><span class="kwd">var<span class="pln"> $body <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"body"<span class="pun">);<span class="pln"><br/><br/><span class="com">// 为所有button元素的click事件绑定事件处理函数btnClick1<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick1 <span class="pun">);<span class="pln"><br/><br/><span class="com">// 为所有button元素的click事件绑定事件处理函数btnClick2<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick2 <span class="pun">);<span class="pln"><br/><br/><span class="com">//为所有a元素绑定click、mouseover、mouseleave事件<span class="pln"><br/>$body<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click mouseover mouseleave"<span class="pun">,<span class="pln"> <span class="str">"a"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"click"<span class="pln"> <span class="pun">){<span class="pln"><br/>        alert<span class="pun">(<span class="str">"点击事件"<span class="pun">);<span class="pln"><br/>    <span class="pun">}<span class="kwd">else<span class="pln"> <span class="kwd">if<span class="pun">(<span class="pln"> event<span class="pun">.<span class="pln">type <span class="pun">==<span class="pln"> <span class="str">"mouseover"<span class="pln"> <span class="pun">){<span class="pln"><br/>        $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">css<span class="pun">(<span class="str">"color"<span class="pun">,<span class="pln"> <span class="str">"red"<span class="pun">);<span class="pln"><br/>    <span class="pun">}<span class="kwd">else<span class="pun">{<span class="pln"><br/>        $<span class="pun">(<span class="kwd">this<span class="pun">).<span class="pln">css<span class="pun">(<span class="str">"color"<span class="pun">,<span class="pln"> <span class="str">"blue"<span class="pun">);<span class="pln">       <br/>    <span class="pun">}<span class="pln"><br/><span class="pun">});<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2<span class="pln"><br/><span class="com">// 点击按钮，btnClick1照样执行<span class="pln"><br/>$body<span class="pun">.<span class="pln">off<span class="pun">(<span class="str">"click"<span class="pun">,<span class="pln"> <span class="str">":button"<span class="pun">,<span class="pln"> btnClick2<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)<span class="pln"><br/><span class="com">// 点击按钮，不会执行任何事件处理函数<span class="pln"><br/><span class="com">// $body.off("click", ":button");<span class="pln"><br/><br/><br/><span class="com">// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数<span class="pln"><br/><span class="com">// 点击按钮或链接，都不会触发执行任何事件处理函数<span class="pln"><br/><span class="com">// $("body").off("click");<span class="pln"><br/><br/><br/><span class="com">// 移除body元素为所有元素的任何事件绑定的所有处理函数<span class="pln"><br/><span class="com">// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数<span class="pln"><br/><span class="com">// $("body").off( );</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copier après la connexion

sont tous des conditions de filtrage. Seules les fonctions de gestion d'événements qui correspondent à toutes les conditions des paramètres seront supprimées. Plus il y a de paramètres, plus il y a de qualifications et plus la plage supprimée est petite.

Exemple et descriptionoff()

Veuillez vous référer au code HTML initial suivant :

<span class="kwd">var<span class="pln"> $btn1 <span class="pun">=<span class="pln"> $<span class="pun">(<span class="str">"#btn1"<span class="pun">);<span class="pln"><br/><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.foo.bar"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="str">"click-1"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.test"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="str">"click-2"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/>$btn1<span class="pun">.<span class="pln">on<span class="pun">(<span class="str">"click.test.foo"<span class="pun">,<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">event<span class="pun">){<span class="pln"><br/>    alert<span class="pun">(<span class="str">"click-3"<span class="pun">);<span class="pln"><br/><span class="pun">});<span class="pln"><br/><br/>$btn1<span class="pun">.<span class="pln">off<span class="pun">(<span class="str">"click.test"<span class="pun">);<span class="pln"> <span class="com">// 移除click-2、click-3<span class="pln"><br/><br/><span class="com">// $btn1.off("click.foo");  // 移除click-1、click-3<span class="pln"><br/><br/><span class="com">// $btn1.off("click.foo.bar");  // 移除click-1<span class="pln"><br/><br/><span class="com">// $btn1.off("click");  // 移除所有click事件处理函数(click-1、click-2、click-3)<span class="pln"><br/><br/><span class="com">// $btn1.off(".foo");  // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copier après la connexion

Tout d'abord, nous lions les événements au bouton ci-dessus et aux éléments puis utilisez la fonction pour dissocier l'événement. Le code correspondant est le suivant : Exécutez le code (veuillez copier les autres codes sur la page de démonstration pour l'exécuter) Dans De plus, la fonction peut également être utilisée. Supprime uniquement les liaisons d'événements de l'espace de noms spécifié.

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!