é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 | 鼠標點擊時觸發(fā)此事件 |
| keypress | 鍵盤上的鍵被按下再次釋放時觸發(fā) |
| submit | 表單被提交時觸發(fā) |
| load | 頁面加載完觸發(fā) |
| dblclick | 鼠標雙擊是觸發(fā) |
| keydown | 鍵盤上的鍵被按下時觸發(fā) |
| change | 當前元素失去焦點并且元素內(nèi)容發(fā)生改變時觸發(fā) |
| resize | 瀏覽器窗口大小被改變時觸發(fā) |
| mouseenter | 添加/觸發(fā) mouseenter 事件 |
| keyup | 鍵盤上的鍵被按下后松開時觸發(fā) |
| focus | 當某個元素失去焦點時觸發(fā) |
| scroll | 添加/觸發(fā) scroll 事件 |
| mouseleave | 添加/觸發(fā) mouseleave 事件 |
| blur | 添加/觸發(fā) 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 grace à 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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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
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("拜拜! 現(xiàn)在你離開了 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中文網(wǎng)(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
