Analyse de la signification de ceci lors de la liaison d'événements de clic dans jQuery-js tutoriel-php.cn

Analyse de la signification de ceci lors de la liaison d'événements de clic dans jQuery

PHPz

Libérer： 2024-02-28 22:03:03

original

400 Les gens l'ont consulté

Analyse de la signification de ceci lors de la liaison dévénements de clic dans jQuery

Analyse de la signification de ceci lors de la liaison d'événements de clic dans jQuery

Lorsque nous utilisons jQuery pour lier des événements, nous rencontrons souvent des problèmes avec l'utilisation de ce mot-clé. La signification de ceci dans jQuery est légèrement différente de celle du JavaScript natif. Elle pointe vers l'élément DOM qui déclenche actuellement l'événement. Dans cet article, nous utiliserons des exemples de code spécifiques pour analyser la signification de cela lors de la liaison d'événements de clic dans jQuery.

Supposons que nous ayons une structure HTML simple contenant un bouton et un élément de paragraphe :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Analyse de la signification de ceci lors de la liaison dévénements de clic dans jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">点击我</button>
<p>这是一个段萼元素</p>
</body>
</html>

Copier après la connexion

Ensuite, nous utilisons jQuery pour lier un événement de clic au bouton et afficher la signification de celui-ci dans le gestionnaire d'événements :

$(document).ready(function(){
  $("#myButton").click(function(){
    console.log(this);
    console.log($(this).text());
  });
});

Copier après la connexion

Dans le ci-dessus, nous sélectionnons l'élément bouton avec l'identifiant "myButton" via le sélecteur et utilisons la méthode click pour lier l'événement click au bouton. Dans la fonction de gestionnaire d'événements, nous affichons la valeur de this et le contenu textuel de l'élément bouton via console.log.

Lorsque nous cliquons sur le bouton, nous pouvons voir le résultat dans les outils de développement du navigateur :

<button id="myButton">点击我</button>
点击我

Copier après la connexion

Cela indique que le mot-clé this pointe vers l'élément DOM qui déclenche actuellement l'événement, qui est l'élément bouton lui-même. Par conséquent, grâce à ce mot-clé, nous pouvons exploiter directement l'élément actuellement cliqué sans avoir besoin de sélecteurs supplémentaires.

De plus, si vous avez besoin d'obtenir des informations pertinentes sur l'événement en cours, telles que l'obtention de l'objet source de l'événement, du type d'événement, etc., vous pouvez utiliser l'objet événement pour l'obtenir :

$(document).ready(function(){
  $("#myButton").click(function(event){
    console.log(event.target);
    console.log(event.type);
  });
});

Copier après la connexion

Dans le code ci-dessus, nous transmettez l'événement de l'objet d'événement en tant que paramètre dans la fonction de traitement d'événement, obtenez l'objet source d'événement via event.target et obtenez le type d'événement via event.type.

En résumé, grâce à l'exemple de code ci-dessus, vous pouvez clairement voir la signification de ceci lors de la liaison d'événements de clic dans jQuery. Le mot-clé this dans jQuery pointe vers l'élément DOM qui déclenche actuellement l'événement, qui peut facilement opérer sur l'élément actuellement cliqué. Dans le même temps, les informations relatives aux événements peuvent également être obtenues via l'objet événement, gérant ainsi les événements de manière plus flexible. J'espère que les lecteurs pourront mieux comprendre l'utilisation de ceci dans jQuery grâce à l'analyse de cet article.

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!