Explication détaillée de l'utilisation de la fonction jQuery.mouseout()

La fonction

mouseout() est utilisée pour lier une fonction de gestionnaire à l'événement mouseout de chaque élément correspondant. Cette fonction peut également être utilisée pour déclencher l'événement mouseout. De plus, vous pouvez également transmettre des données supplémentaires à la fonction gestionnaire d'événements.

L'événement mouseout est déclenché lorsque la souris quitte un élément. Il est similaire à l'événement mouseleave, mais l'événement mouseleave ne se déclenche que lorsque la souris quitte l'élément actuel, tandis que l'événement mouseout se déclenche lorsque la souris quitte l'élément actuel et l'un de ses éléments descendants (en d'autres termes, l'événement mouseout prend en charge le bouillonnement). ).

De plus, vous pouvez lier plusieurs gestionnaires d'événements en appelant cette fonction plusieurs fois pour le même élément. Lorsque l'événement mouseout est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via mouseout(), utilisez la fonction unbind().

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

Syntaxe

jQueryObject.mouseout( [[ data ,]  handler ] )

Si au moins un paramètre est spécifié, cela signifie lier la fonction de gestionnaire de l'événement mouseout ; si aucun paramètre n'est spécifié, cela signifie déclencher l'événement mouseout.

Paramètres

nouvelle prise en charge de jQuery 1.4.3 : mouseout() prend en charge les paramètres de données.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM actuel. mouseout() passe également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

Valeur de retour

mouseout()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

Veuillez vous référer à l'exemple de code HTML suivant :

<div>
    <p id="p1">CodePlayer</p>
    <p id="p2">专注于编程技术开发分享</p>
    <p id="p3">http://www.365mini.com</p>
</div>
<span id="msg"></span>

Maintenant, nous lions une fonction de gestionnaire pour l'événement mouseout du

élément (vous pouvez lier plusieurs éléments définis, exécutés dans l'ordre selon l'ordre de liaison lorsqu'ils sont déclenchés) :

mouseleave只会在鼠标离开

元素时才会触发，而mouseout会在鼠标离开

元素或任何

元素时触发。例如：鼠标从p1进入p2(即离开p1)会触发

元素的mouseout事件，但不会触发

元素的mouseleave的事件。

var count = 0;

//记录触发div元素的mouseout事件的次数
$("div").mouseout(function(){
    $("#msg").html( "触发mouseout的次数：" + ( ++count ) );
});

//鼠标离开div元素就改变背景颜色
$("div").mouseout(function(){
    $(this).css( "color", "purple" );
});


// 触发mouseout事件
// $("div").mouseout( );

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

var cssStyle = { background: "#eee", color: "blue" };

//鼠标离开div元素就设置指定的css样式
$("div").mouseout( cssStyle, function(event){
    var style = event.data;
    $(this).css( style );
} );

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!