Événements jQuery
Que sont les événements ?
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électionnez l'élément de clic du bouton radio
Le terme « déclencheur » (ou « incendie ») est souvent utilisé dans des événements tels que : « L'événement keypress est déclenché lorsque vous appuyez sur la touche ».
Liste des événements.
1.blur() Déclenché lorsque le focus est perdu. Y compris le clic de souris pour quitter et la touche TAB pour quitter.
2.change() Il est déclenché lorsque la valeur change et que l'élément perd le focus.
3.click() Déclenché lorsque la souris est cliquée.
4.dblclick() Déclenché lorsque la souris est double-cliquée.
5.error() Déclenché lorsqu'une erreur JavaScript se produit ou que l'attribut src de img n'est pas valide.
6.focus() Déclenché lorsqu'un élément obtient le focus. Remarque : Certains objets ne sont pas pris en charge.
7.focusin() Déclenché lorsqu'un élément ou ses sous-éléments obtiennent le focus. La différence avec focus() est qu'il peut détecter quand ses sous-éléments internes obtiennent le focus.
8.focusout() Déclenché lorsqu'un élément ou ses sous-éléments perdent le focus. La différence avec focusout() est qu'il peut détecter quand des sous-éléments internes perdent le focus.
9.keydown() Déclenché lorsque le clavier est enfoncé.
10.keyup() Déclenché lorsque la touche est relâchée.
11.mousedown() Déclenché lorsque la souris est cliquée sur l'élément.
12.mouseenter() Déclenché lorsque la souris passe sur l'élément. La différence entre mouseenter et mouseover est qu'il sera également déclenché lorsque la souris passe sur les éléments enfants de mouseover, mais pas mouseenter.
13.mouseleave() Déclenché lorsque la souris sort de l'élément.
14.mousemove() Déclenché lorsque la souris se déplace sur l'élément. .clientX et .clientY représentent respectivement la coordonnée X et la coordonnée Y de la souris.
15.mouseout() Déclenché lorsque la souris s'éloigne de l'élément.
16.mouseover() Déclenché lorsque la souris se déplace dans un élément.
17.mouseup() Déclenché lorsque le bouton gauche de la souris est enfoncé et relâché.
18.resize() Déclenché lorsque la taille de la fenêtre du navigateur change. $(window).resize();
19.scroll() Déclenché lorsque la barre de défilement change.
20.select() Déclenché lorsque le contenu de l'entrée est sélectionné.
21.submit() Soumettez le formulaire sélectionné.
22.unload() Déclenché lorsque la page est déchargée.
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 le moment où l'événement est déclenché. 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 après le chargement complet du document. 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 suivant, 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">
<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>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 la fonction à exécuter lorsque l'événement dblclick se produit :
<!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(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我也消失！</p>
<p>双击我也是！</p>
</body>
</html>mouseenter(), comparaison mouseover() :
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave()
L'événement mouseleave se produit lorsque le pointeur de la souris quitte un élément. La méthode
mouseleave() déclenche l'événement mouseleave, ou spécifie une fonction à exécuter lorsque l'événement mouseleave 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").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>mousedown()
Lorsque le pointeur de la souris se déplace l'élément, et L'événement mousedown se produit lorsque le bouton de la souris est enfoncé. La méthode
mousedown() déclenche l'événement mousedown, ou spécifie une 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>mouseup()
Lorsque le bouton de la souris est relâché sur l'élément, l'événement mouseup se produira. La méthode
mouseup() déclenche l'événement mouseup, ou spécifie la fonction à exécuter lorsque l'événement mouseup 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").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>hover()
hover() est la méthode utilisé pour simuler l'événement d'arrêt du 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>focus()
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 une 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>blur()
Lorsque l'élément perd le focus, l'événement de flou se produit. La méthode
blur() déclenche l'événement de flou ou spécifie une fonction à exécuter lorsqu'un événement de flou 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>
section suivante