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

La fonction focusin() est utilisée pour lier une fonction de gestionnaire à l'événement focusin de chaque élément correspondant. De plus, vous pouvez transmettre des données supplémentaires à la fonction gestionnaire d'événements.

L'événement focusin est l'événement focus. La différence avec l'événement focus est que focusin peut détecter le moment où les éléments descendants de l'élément obtiennent le focus (en d'autres termes, l'événement focusin 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 focusin 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 focusin(), utilisez la fonction unbind().

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

Syntaxe

jQuery 1.4 a ajouté cette fonction.

jQueryObject.focusin( [ data ,]  handler )

Paramètres

jQuery 1.4.3 nouveau support : focusin() prend en charge le paramètre data.

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

Si la valeur de retour du gestionnaire de fonction est fausse, cela signifie empêcher le comportement par défaut de l'élément et empêcher l'événement de bouillonner dans l'arborescence DOM. Par exemple, si la fonction de gestionnaire de l'événement click du lien renvoie false, le comportement de saut d'URL par défaut du lien peut être empêché.

La fonction de gestionnaire de l'événement submit du formulaire renvoie false, ce qui peut empêcher le comportement de soumission de formulaire par défaut du formulaire.

Valeur de retour

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

示例&说明

请参考下面这段初始HTML代码：

<p>
    <input id="t1" name="name" type="text" />
</p>
<p>
    <input id="t2" name="age" type="text" />
</p>
<div id="msg"></div>

现在，我们为所有p元素的focusin事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：

focusin是支持冒泡的，当我们把鼠标光标放入文本框时，该事件冒泡传递到父元素p上，因此可以在p元素上触发focusin事件。

var $ps = $("p");

//为所有p元素的focusin事件绑定处理函数
$ps.focusin( function(event){
    $(this).css("border", "1px solid blue");
} );

//为所有p元素的focusin事件绑定处理函数
$ps.focusin( function(event){
    $(this).css("border-radius", "3px");
} );

//触发所有p元素的focusin事件
//$ps.focusin( ); // 调用不带任何参数的focusin()函数，会触发每个匹配元素的focusin事件

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

var inputMap = { "name": "姓名", "age": "年龄" };

//为所有text元素的focusin事件绑定处理函数
$("p").focusin( inputMap, function(event){
    var map = event.data;
    var inputName = $(this).children(":text:focus").attr("name");
    $("#msg").html( '请输入[' + map[inputName] + ']' );
} );

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!