Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 16:38:33
original
1593 Les gens l'ont consulté

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){})

Copier après la connexion

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

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 
Copier après la connexion
Copier après la connexion

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){}) 
Copier après la connexion
Copier après la connexion

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

$('li').unbind('click')
Copier après la connexion

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){}) 
Copier après la connexion

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

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

Copier après la connexion

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"});
})
Copier après la connexion

6. Supprimer des événements

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

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion

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);
}
Copier après la connexion

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);
})
Copier après la connexion

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");
})
Copier après la connexion

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

$("button").click(function(){
 $("p").off("click");
})
Copier après la connexion

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");

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});
Copier après la connexion

如果想停止触发事件的传播,可通过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的默认行为和绑定行为
})

Copier après la connexion

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>

Copier après la connexion

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

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });
Copier après la connexion

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

如何阻止事件冒泡?

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

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });
Copier après la connexion

以上,只为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>

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});
Copier après la connexion

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

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

13.toggle方法

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

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

Copier après la connexion

14.mouseenter和mouseleave方法

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

Copier après la connexion

15.hover方法

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

Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal