Cet article présente principalement l'utilisation de la méthode on() dans jQuery. L'exemple analyse la fonction et la définition de la méthode on() et l'utilisation de la liaison d'une ou plusieurs fonctions de traitement d'événements sur la correspondance. Pour obtenir des conseils, les amis qui en ont besoin peuvent se référer à
Cet article explique l'utilisation de la méthode on() dans jQuery avec des exemples. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :
Cette méthode peut lier une ou plusieurs fonctions de gestion d'événements à l'élément correspondant.
Utilisez la méthode off() pour supprimer l'événement lié par la méthode on().
Structure grammaticale 1 :
Le code est le suivant :
$(selector).on(events,[ sélecteur], [data],fn)
Liste des paramètres :
| Paramètres |
Description |
| événements |
Un ou plusieurs types d'événements séparés par des espaces et un espace de noms facultatif. |
| sélecteur |
Facultatif. Un selectorString utilisé pour filtrer les éléments sélectionnés, le handler sera appelé sur les éléments descendants de ce sélecteur.
Si la sélection est vide ou ignorée, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné. |
| données |
Facultatif. Objet de données supplémentaire transmis à l'objet événement en tant que valeur de la propriété event.data pour traitement par la fonction de gestionnaire d'événements. |
| fn |
Fonction exécutée lorsque cet événement est déclenché. La valeur false peut également être utilisée comme raccourci pour une fonction qui renvoie false. |
Exemple de code :
Exemple 1 :
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").on("click",function(){
$(this).text("脚本之家欢迎您");
})
})
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>Copier après la connexion
Le code ci-dessus lie un événement de clic à p, cliquez sur Lorsque p, vous pouvez définir un nouveau contenu de texte pour p.
Exemple 2 :
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").on("click mousemove",function(){
$(this).text("脚本之家欢迎您");
})
})
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>Copier après la connexion
Le code ci-dessus lie deux événements à p. Que vous cliquiez sur p ou que vous déplaciez la souris dans p, ce sera p Définir le nouveau contenu du texte.
Exemple 3 :
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
width:60px;
height:60px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newtext="这是新文本"
$("p").on("click",{"mytext":newtext},function(e){
$(this).text(e.data.mytext);
})
})
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>Copier après la connexion
Le code ci-dessus utilise le paramètre data pour transmettre des données à la fonction de traitement des événements liés.
Exemple 4 :
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.parent{
width:160px;
height:160px;
border:1px solid green;
font-size:12px;
}
.children{
width:100px;
height:100px;
border:1px solid red;
}
span{background-color:green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newtext="这是新文本"
$(".parent").on("click",".children",{"mytext":newtext},function(e){
$(this).text(e.data.mytext);
})
})
</script>
</head>
<body>
<p class="parent">
<p class="children"><span>原来内容</span></p>
</p>
<span>大家好</span>
</body>
</html>Copier après la connexion
Le code ci-dessus utilise la chaîne de sélection pour filtrer lequel des éléments enfants de l'élément correspondant peut répondre à l'événement lié. Dans le code ci-dessus, l'élément portant le nom de classe children et ses éléments enfants peuvent appeler des événements liés.
Structure grammaticale deux :
Le code est le suivant :
$(selector).on(object,[selector],[data] )
Liste des paramètres :
| 参数 | 描述 |
| object | 一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。 |
| selector | 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。
如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 |
| data | 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。 |
实例代码:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
width:160px;
height:160px;
border:1px solid green;
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var newtext="这是新文本"
$("p").on({click:function(e){
$(this).text(e.data.mytext);
}},{"mytext":newtext})
})
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>Copier après la connexion
以上代码中，事件类型和事件处理函数以对象的形式绑定的。
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
