Exemples de fonctions d'événement jQuery courantes
bind( type, [data], fn ) exemple de fonction
bind() est la fonction la plus couramment utilisée. Faites attention au paramètre data dans. la signature de la méthode. Vous pouvez transmettre quelques données supplémentaires avant le traitement de l'événement :
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)Faites attention à l'utilisation des paramètres d'événement. L'objet événement est unifié dans jQuery, et l'objet événement est passé comme seul paramètre du. fonction de traitement des événements.
data Nous devons également accéder aux paramètres via event.data Pourquoi devons-nous fournir des paramètres de données ?
Parce que nous rencontrons souvent ce problème : nous espérons effectuer des tâches spéciales. traitement basé sur certaines données de la source de l'événement lors du traitement de l'événement.
Il existe actuellement deux solutions controversées sur Internet :
(1) Utiliser des attributs d'élément personnalisés pour stocker les données.
Par exemple :
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
Obtenir des données dans la fonction de traitement d'événements :
$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });la fonction attr est la connaissance de la conférence précédente, qui est utilisée pour obtenir le " attributs d'élément" de l'élément, et peut obtenir des attributs d'élément personnalisés. Cliquez sur div pour afficher :
(2) Utilisez un script pour transmettre des données au gestionnaire d'événements : <🎜 L'élément >
<div id="testDiv6">获取自定义数据-2</div>n'a aucun attribut personnalisé Lors de l'ajout d'un gestionnaire d'événements, des données supplémentaires seront transmises :
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });Le. le résultat après avoir cliqué sur le div est le même que la méthode 1 : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>jQuery事件处理:trigger和triggerHandler示例</title>
script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#old").click(function()
{
$("#divResult").html("");
$("input").trigger("focus");
});
$("#new").click(function()
{
$("#divResult").html("");
$("input").triggerHandler("focus");
});
$("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });
})
</script></head><body>
<button id="old">
.trigger("focus")</button>
<button id="new">
.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
</body>
</html>Lorsque le bouton ".trigger" est cliqué, Focused sera appelé deux fois, et l'élément d'entrée sera Focused : 
En d'autres termes, la fonction de déclenchement déclenche le comportement par défaut du navigateur consistant à obtenir le focus, permettant à l'élément d'entrée d'obtenir le focus, donc le focus est appelé à nouveau Fonction de gestion des événements.
triggerHandler appelle uniquement la fonction de gestion des événements liée à l'événement focus et ne déclenche pas le comportement du navigateur, de sorte que l'élément d'entrée final n'obtient pas le focus.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
