Quelles sont les méthodes événementielles de base dans jquery ?

Méthodes d'événement de base : 1. click(), définit l'événement de clic de souris ; 2. dblclick(), définit l'événement de double-clic de souris ; 3. change(), définit l'événement de changement de contenu ; définir l'événement de déclenchement du focus ; 5. blur(), définir l'événement de perte de focus ; 6. mousedown(), etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

La méthode d'événement déclenche ou ajoute une fonction au gestionnaire d'événements de l'élément sélectionné.

Le tableau ci-dessous répertorie quelques méthodes jQuery pour gérer les événements.

Méthode	Description
bind()	Ajouter un gestionnaire d'événements à l'élément
blur()	Ajouter/déclencher un événement de perte de focus
change()	Ajouter/Déclencher changer l'événement
click()	Ajouter/déclencher un événement de clic
dblclick()	Ajouter/déclencher un événement de double-clic
die()	Supprimé dans la version 1.9. Supprimer tous les gestionnaires d'événements ajoutés via la méthode live()
focus()	Ajouter/déclencher un événement focus
focusin()	Ajouter un gestionnaire d'événements à focusin event
focusout()	Ajouter gestionnaire d'événements pour focusout event
hover()	Ajoutez deux gestionnaires d'événements pour survoler l'événement
keydown()	Ajouter/déclencher un événement keydown
keypress()	Ajouter/déclencher un événement de pression de touche
keyup()	Ajouter/déclencher un événement keyup
live()	Supprimé dans la version 1.9. Ajoutez un ou plusieurs gestionnaires d'événements à l'élément sélectionné actuel ou futur
mousedown()	Ajoutez/déclenchez l'événement mousedown
mouseenter()	Ajoutez/déclenchez l'événement mouseenter
mouseleave ( )	Ajouter/déclencher un événement mouseleave
mousemove()	Ajouter/déclencher un événement mousemove
mouseout()	Ajouter/déclencher un événement mouseout
mouseover()	Ajouter /déclencher le passage de la souris sur les événements
mouseup()	Ajouter/déclencher des événements mouseup
off()	Supprimer les gestionnaires d'événements ajoutés via la méthode on()
on()	Ajouter la gestion des événements aux éléments Procédure
one()	ajoute un ou plusieurs gestionnaires d'événements à l'élément sélectionné. Ce gestionnaire ne peut être déclenché qu'une fois par élément
ready()	Spécifie une fonction à exécuter lorsque le DOM est complètement chargé
toggle()	Supprimé dans la version 1.9. Ajoutez deux fonctions ou plus pour basculer entre les événements de clic
trigger()	Déclenchez tous les événements liés à l'élément sélectionné
triggerHandler()	Déclenchez l'événement lié à l'élément sélectionné Toutes les fonctions sur le spécifié event
unbind()	Supprimer le gestionnaire d'événements ajouté de l'élément sélectionné
undelegate()	Supprimer le gestionnaire d'événements de l'élément sélectionné actuel ou futur Programme

Instructions :

1. La fonction d'événement ci-dessus a trois utilisations :

//直接绑定事件到元素上
$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value)    //通过对象e获取输入的值
});
 
//传递参数调用函数处理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通过e传递参数数据
});
 
//手动触发已绑定的点击事件
$elem.click()

2. La différence entre mouseover et mouseenter : peu importe que le pointeur de la souris passe par l'élément sélectionné ou ses sous-éléments, l'événement mouseover sera être déclenché, appelé support bulles Traitement , le traitement bouillonnant fait référence à des événements qui sont définis conjointement par l'élément enfant et l'élément parent. Lorsque l'élément enfant est déclenché ou que l'élément enfant n'est pas défini, l'événement se propage vers. le parent, provoquant le déclenchement de l'événement parent. L'événement mouseenter n'est déclenché que lorsque le pointeur de la souris passe sur l'élément sélectionné.

3. L'élément de formulaire a un comportement par défaut de soumission du formulaire. S'il est traité via la soumission, ce comportement par défaut du navigateur doit être désactivé. La méthode traditionnelle consiste à appeler l'objet événement e.preventDefault() pour le gérer. Dans jQuery, vous pouvez directement renvoyer false à la fin de la fonction.

    //回车键或者点击提交表单后禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });

4. Utilisez on()

Utilisation de base : .on(events,[selector],[data])

La méthode la plus courante consiste à lier un événement de clic à un élément. Comparez la différence entre la méthode de raccourci. et la méthode on

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多个事件绑定同一个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//将数据传递到处理程序
$( "button" ).on( "click", {    //第二个参数传递数据给函数调用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

Propriétés et méthodes de l'objet événement

.type	Type d'événement. Si vous utilisez un gestionnaire d'événements pour gérer plusieurs événements, vous pouvez utiliser cette propriété pour obtenir le type d'événement. type d'événement, tel que click
.data	Des paramètres supplémentaires sont transmis lorsque l'événement est appelé
.target	L'élément DOM qui a déclenché l'événement
.which	Indiquez sur lequel on a appuyé Touche ou bouton
.timeStamp	Cette propriété renvoie le nombre de millisecondes du 1er janvier 1970 à l'heure de l'événement
.pageX/Y	par rapport au document à gauche /La position de la souris sur le bord supérieur
.result	La valeur renvoyée par la même fonction de gestionnaire d'événements précédente
.preventDefalut()	L'action par défaut consistant à empêcher l'événement
.stopPropagation()	Annuler l'événement bouillonnant

$("#content").click(function(event) {
   $("#msg").html("<p>外层div元素被单击</p>");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

【Apprentissage recommandé : Tutoriel vidéo jQuery , vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!