Résumé de l'utilisation des événements jQuery examples_jquery

Cet article résume en détail l'utilisation des événements dans jQuery avec des exemples, ce qui constitue une bonne valeur de référence pour apprendre jQuery. Partagez-le avec tout le monde pour votre référence. L'utilisation spécifique est la suivante :

1. Lier les événements aux éléments via des noms de méthodes :

$('li').click(function(event){})

2. Liez les événements aux éléments via la méthode bind :

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

On peut voir que grâce à la liaison, plusieurs événements peuvent être liés à des éléments.

3. Espace de noms d'événement

Pourquoi avez-vous besoin d'un espace de noms d'événement ?

→Supposons que vous liez d'abord 2 événements de clic à l'élément li.

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→Maintenant, nous devons nous déconnecter de l'un des événements de clic, qui peut s'écrire ainsi :

$('li').unbind('click')

Mais de cette façon, tous les événements de clic dans notre Li sont déconnectés, ce qui n'est pas ce que nous voulons. L'utilisation de l'espace de noms d'événement peut résoudre ce problème. La raison pour laquelle l'espace de noms d'événement est nécessaire est qu'il nous facilite la déconnexion des événements.

Comment utiliser l'espace de noms d'événement ?
→Lors de la liaison d'un événement à un élément, ajoutez l'espace de noms après le nom de l'événement, en respectant le format : nom de l'événement.nom de l'espace de noms.

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→Lorsque vous vous déconnectez d'un événement, vous pouvez écrire comme ceci :

$('li').unbind('click.editMode')

4. Types d'événements

flou
changer
cliquez
double-cliquez
erreur
se concentrer
se concentrer
concentration
touche enfoncée
appui sur une touche
touche
charger
souris en bas
entrée de la souris
congé de souris
déplacement de la souris
sortie de souris
Moseover
souris
prêt
redimensionner
faire défiler
sélectionner
soumettre
décharger

Méthode 5.one

Utilisé pour créer un événement ponctuel. Une fois cet événement exécuté une fois, il sera automatiquement supprimé.

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6. Supprimer des événements

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.Attribut d'événement

En fait, c'est une propriété globale de jquery, jQuery.Event. Chaque fois qu'un événement est déclenché, une instance d'objet Event est transmise au gestionnaire d'événements.

Les événements peuvent être créés et déclenchés via le constructeur d'événements.

var e = jQueery.Event("click")
jQuery("body").trigger(e);

Vous pouvez même transmettre un objet anonyme dans l'événement via le constructeur.

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

Lorsqu'il est utilisé, obtenez la valeur de l'objet anonyme via event.data.KeyCode.

Les objets anonymes peuvent être transmis dans Event via le constructeur de jQuery.Event. De plus, les objets anonymes peuvent également être transmis via des événements.

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

On peut voir que la clé de l'objet anonyme peut être obtenue via event.data.

Grâce aux instances d'objet Événement, vous pouvez également obtenir d'autres aspects d'informations, tels que :

$("p").click(function(event){
 alert(event.target.nodeName);
})

Ci-dessus, obtenez le nom de l'élément qui a déclenché l'événement via event.target.nodeName.

Les autres propriétés de jQuery.Event incluent :

altKey True si la touche alt est enfoncée Sur les claviers Mac, la touche alt est marquée Option
. ctrKey La touche ctrl est enfoncée
shiftKey La touche Maj est enfoncée
currentCiblez l'élément actuel dans la phase de bouillonnement
données
metaKey Généralement, la touche Meta est Ctrl, mais sur Mac, c'est la touche Commande
La coordonnée horizontale du curseur par rapport à l'origine de la page lors de l'événement souris pageX
pageY La coordonnée verticale du curseur par rapport à l'origine de la page lors de l'événement souris
RelatedTarget L'élément que le curseur quitte ou entre lorsque l'événement de souris est déclenché
La coordonnée horizontale du curseur par rapport à l'origine de l'écran lors de l'événement de souris screenX
screenY La coordonnée verticale du curseur par rapport à l'origine de l'écran lors des événements de souris
result renvoie la valeur non définie la plus récente du gestionnaire d'événements précédent
élément cible qui déclenche l'événement
timestamp L'horodatage en millisecondes de la création de l'instance jQuery.Event
tapez le type d'événement, tel que clic
qui S'il s'agit d'un événement clavier, il représente le numéro de la touche. S'il s'agit d'un événement souris, il enregistre si le bouton gauche, le bouton du milieu ou le bouton droit a été enfoncé

.

8.Méthode événementielle

event.preventDefault() empêche le comportement par défaut
event.stopPropgation() arrête de "bouillonner", c'est-à-dire arrête de se propager plus haut dans le DOM
event.stopImmediatePropagation() arrête la propagation ultérieure de tous les événements
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.méthode live et méthode on

Cette méthode nous permet de créer des événements pour des éléments qui n'existent pas encore. La différence avec la méthode bind est qu'elle peut lier des événements à tous les éléments correspondants, et les paramètres sont les éléments qui n'existent pas encore et doivent être créés dynamiquement. De plus, la méthode live ne doit pas nécessairement être placée dans le gestionnaire prêt $(function(){}). Après jQuery 1.7, elle a été remplacée par la méthode on.

$("p").on("click", function(){
 alert("hello");
})

Si vous souhaitez annuler l'inscription à un événement :

$("button").click(function(){
 $("p").off("click");
})

10.méthode de déclenchement

La méthode trigger peut être utilisée lorsque l'on souhaite déclencher manuellement des événements liés à des éléments.

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法的时候传入匿名对象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委托

什么是事件冒泡？

有这么一段代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
 <div>
  <p><a href="#foo"><span>I am a Link!</span></a></p>
  <p><a href="#bar"><b><i>I am another Link!</i></b></a></p>
 </div>
</body>
</html>

现在，给该页面所有的元素绑定click事件，包括window和document。

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。

如何阻止事件冒泡？

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它。

如何有效利用事件冒泡？

在jquery中，事件委托却很好地利用了事件冒泡。

<html>
<body>
<div id="container">
 <ul id="list">
  <li><a href="http://domain1.com">Item #1</a></li>
  <li><a href="/local/path/1">Item #2</a></li>
  <li><a href="/local/path/2">Item #3</a></li>
  <li><a href="http://domain4.com">Item #4</a></li>
 </ul>
</div>
</body>
</html>

现在，我们想给现有li中的a标签绑定事件，这样写：

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？

$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。