événements jQuery
Qu'est-ce qu'un événement ?
La réponse de la page aux différents visiteurs s'appelle un événement.
Les gestionnaires d'événements font référence à des méthodes appelées lorsque certains événements se produisent en HTML.
Exemple :
Déplacez la souris sur l'élément.
Sélectionner le bouton radio
Cliquer sur l'élément
Le terme « déclencheur » est souvent utilisé dans events "(ou "fire") Par exemple : "L'événement keypress se déclenche lorsque vous appuyez sur une touche."
Événements DOM courants :
| 事件 | 说明 |
|---|---|
| click | 鼠标点击时触发此事件 |
| keypress | 键盘上的键被按下再次释放时触发 |
| submit | 表单被提交时触发 |
| load | 页面加载完触发 |
| dblclick | 鼠标双击是触发 |
| keydown | 键盘上的键被按下时触发 |
| change | 当前元素失去焦点并且元素内容发生改变时触发 |
| resize | 浏览器窗口大小被改变时触发 |
| mouseenter | 添加/触发 mouseenter 事件 |
| keyup | 键盘上的键被按下后松开时触发 |
| focus | 当某个元素失去焦点时触发 |
| scroll | 添加/触发 scroll 事件 |
| mouseleave | 添加/触发 mouseleave 事件 |
| blur | 添加/触发 blur 事件 |
Syntaxe de la méthode d'événement jQuery
Dans jQuery, la plupart des événements DOM ont une méthode jQuery équivalente.
Spécifiez un événement de clic sur la page :
$("p").click();
L'étape suivante consiste à définir quand pour déclencher l'événement. Vous pouvez y parvenir grâce à une fonction événementielle :
$("p").click(function(){
// Code exécuté après le déclenchement de l'action !!
}) ;
Méthodes d'événements jQuery couramment utilisées
$(document).ready()
La méthode $(document).ready() nous permet d'exécuter une fonction une fois le document complètement chargé. Cette méthode événementielle a été mentionnée dans le chapitre Syntaxe de jQuery. La méthode
click()
click() est une fonction qui est appelée lorsque l'événement de clic sur le bouton est déclenché.
Cette fonction est exécutée lorsque l'utilisateur clique sur l'élément HTML.
Dans l'exemple ci-dessous, lorsqu'un événement click est déclenché sur un élément <p>, l'élément <p> actuel est masqué :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>Exécutez le programme pour l'essayer
dblclick()
Lorsqu'un élément est double-cliqué, l'événement dblclick se produit.
La méthode dblclick() déclenche l'événement dblclick ou spécifie une fonction à exécuter lorsqu'un événement dblclick se produit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>Exécutez le programme pour l'essayer
mouseenter()
L'événement mouseenter se produit lorsque le pointeur de la souris passe à travers un élément.
La méthode mouseenter() déclenche l'événement mouseenter, ou spécifie une fonction à exécuter lorsqu'un événement mouseenter se produit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>Exécutez le programme pour l'essayer
mousedown()
L'événement mousedown se produit lorsque le pointeur de la souris se déplace sur un élément et que le bouton de la souris est enfoncé.
La méthode mousedown() déclenche l'événement mousedown, ou spécifie la fonction à exécuter lorsque l'événement mousedown se produit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>Exécutez le programme pour l'essayer
<🎜 La méthode >
hover()
hover() est utilisée pour simuler les événements de survol du curseur. Lorsque la souris se déplace sur l'élément, la première fonction spécifiée (mouseenter) sera déclenchée ; lorsque la souris sortira de l'élément, la deuxième fonction spécifiée (mouseleave) sera déclenchée.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>Exécutez le programme et essayez-lefocus()
L'événement focus se produit lorsqu'un élément obtient le focus.
Lorsqu'un élément est sélectionné avec un clic de souris ou positionné avec la touche de tabulation, l'élément obtient le focus.
La méthode focus() déclenche l'événement focus, ou spécifie la fonction à exécuter lorsque l'événement focus se produit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>Exécutez le programme et essayez-le
Si vous êtes intéressé, vous pouvez l'essayer. Autres événements
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
