événements jQuery
é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 relaché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 relaché.
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 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 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>點(diǎn)我我就不見(jiàn)了！</p>
<p>我們?nèi)齻€(gè)都是的！</p>
<p>他們說(shuō)的是真的！</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>雙擊鼠標(biāo)左鍵的，我就消失。</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>不論鼠標(biāo)指針穿過(guò)被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件。</p>
<p>只有在鼠標(biāo)指針穿過(guò)被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發(fā)的 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中文網(wǎng)(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("再見(jiàn)，您的鼠標(biāo)離開(kāi)了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</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中文網(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("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落</p>
</body>
</html>mouseup()
Lorsque le bouton de la souris est relaché 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中文網(wǎng)(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("鼠標(biāo)在段落上松開(kāi)。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</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("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開(kāi)了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</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中文網(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>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中文網(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>
