Événements dans jQuery

1. Charger le DOM

Une fois la page chargée, JS utilise window.onload pour ajouter des événements aux éléments DOM. Dans jQuery, utilisez $(document).ready() pour ajouter des événements aux éléments DOM. Utilisez ceci La méthode peut opérer sur le DOM lorsqu'elle est prête à charger et appeler la fonction à laquelle elle est liée.

Comparaison entre window.onload et $(document).ready()

Vous ne pouvez pas en écrire plusieurs en même temps

window.onload=function(){}

$(document).ready(function(){})

Mécanisme d'exécution

Doit attendre que tout le contenu de la page Web soit chargé (y compris images)

Exécuter une fois que toutes les structures DOM de la page Web ont été dessinées. Peut-être que les éléments associés aux éléments DOM n'ont pas été chargés.

Nombre de. écrit

Vous pouvez en écrire plusieurs en même temps

Méthode d'écriture simplifiée

Aucun

	window.onload=function(){}	$(document).ready(function(){})
执行机制	必须等到网页中的所有内容加载完毕后（包括图片）	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个	可以同时编写多个
简化写法	无	$(document)可以简写为$(),不带参数时默认为document，因此可简写为： ①$(document).ready(function(){}) ②$(function(){})
对比		极大地提高了Web应用程序的相应速度
缺点		元素的关联文件未下载完，造成某些属性的无效
解决办法		使用另一个关于页面加载的方法——load()方法

$(document) peut être abrégé en $(), qui par défaut est un document sans paramètres, il peut donc être abrégé en : ①$(document).ready(function(){}) ②$(function(){})

Comparaison

Grandement améliorée La vitesse correspondante de l'application Web

Inconvénients

td>

Le fichier associé à l'élément n'a pas été téléchargé. Certains attributs sont invalides

Solution

Utilisez une autre méthode pour le chargement des pages ——méthode load()

Supplément : La méthode load() liera une fonction de gestionnaire dans l'événement onload de l'élément. Si la fonction de gestionnaire est liée à l'objet window, elle le fera. être déclenché après le chargement de tout le contenu (y compris les fenêtres, les cadres, les objets, les images, etc.) Si la fonction de gestionnaire est liée à un élément, elle sera déclenchée après le chargement du contenu de l'élément.

1 $(window).load(function(){2 //编写代码3 })

2. Liaison d'événement — Méthode —bind()

Format : bind(type [, data] , fn)

Le premier paramètre est le type d'événement : flou, focus, chargement, déchargement, redimensionnement, défilement, clic, dblclick, mousedown, mouseover, mouseup, mousemove, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Le deuxième paramètre est un paramètre facultatif, qui est un objet de données supplémentaire transmis à l'objet événement en tant que valeur d'attribut evert.data

Le troisième repas C'est une fonction de traitement utilisée pour lier

Supplément : Pour déterminer si un élément est affiché, utilisez la méthode is() dans jQuery

Abréviation : .mouseover(function(){})

Autre utilisation de la méthode bind() :

(1) Un -temps pour un élément Lier plusieurs types d'événements

 
$("p").bind("mouseover mouseout",
function
(){};);

(2) Ajouter un espace de noms d'événement pour une gestion facile

3. Événement synthétique

Méthode hover() : simuler un événement de survol du curseur

Format : survol ( entrer, quitter);

Lorsque le curseur se déplace vers l'élément, la première fonction spécifiée sera déclenchée. Lorsque le curseur supprimera l'élément, la deuxième fonction spécifiée sera déclenchée. 🎜>

Événements alternatifs : bind("mouseenter") et bind("mouseleave")

méthode toggle() : Simulez des événements de clic de souris continus

Format : toggle(fn1,fn3...fnN);

$(function()){
      $("#panel").toggle(function(){
               $(this).next().show();
       },function(){
                $(this).next().hide();
       })
})

La bascule ajoutée a une autre fonction : changer l'état visible de l'élément. Si vous cliquez sur le didacticiel de l'élément, il sera masqué. Si l'élément est masqué, il sera visible après avoir cliqué pour le changer

$(function()){
       $("#panel").toggle(function(){
                $(this).next().toggle();
        },function(){
                 $(this).next().toggle();
        })
})

4. Événement bouillonnant

Bulles : Les éléments imbriqués correspondent à l'ordre d'exécution du même événement, et les événements suivent la hiérarchie DOM jusqu'en haut

Problèmes causés par le bouillonnement d'événements :

(1) Objet événement : événement

Pour créer un objet événement, il suffit d'ajouter un paramètre event à la fonction de traitement d'événement. Lorsqu'un événement est exécuté sur un élément, l'objet événement est créé uniquement par le traitement d'événement. Une fois la fonction de traitement d'événement exécutée, l'objet événement est Destroy

(2) Arrêter le bouillonnement d'événement : méthode event.stopPropagation()

(3) Empêcher le comportement par défaut : event.preventDefault. ()

Exemple : validation du formulaire Empêcher la soumission du formulaire lorsque les conditions de soumission ne sont pas remplies (comportement par défaut)

$(function(){
      $("#sub").bind("click",function(event){
              var username=$("#username").val();
              if(username==""){
                     $(""#msg).html("<p>文本框内容不能为空</p>")；
                     event.preventDefault();
              }
        })
})

Si vous souhaitez arrêter le bouillonnement et le comportement par défaut de l'objet événement en même temps, vous pouvez renvoyer false dans la fonction de gestion des événements

5. Capture d'événement

Événement la capture et le bouillonnement d'événements sont le processus de réflexion, et la capture d'événements est déclenchée de haut en bas

Tous les navigateurs ne prennent pas en charge la capture d'événements, et jQuery ne prend pas en charge

. 6. Propriétés des objets événementiels

 

 

 

 

 

 

 

 

补充：（1）JS中的stopPropagation()方法不兼容IE浏览器

            （2）在标准DOM中，mouseover和mouseout所发生的元素都可以通过event.target访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget相当于IE浏览器的event.fromElement，在mouseout中相当于IE的event.toElement。

            （3）在JS中，IE用event.x和event.y；Firefox用event.pageX/event.pageY。如果页面有滚动条，还要加上滚动条的宽度和高度。

 

6.移除事件

（1）移除按钮元素上已有的事件：$("#btn").unbind();

格式：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数

①如果没有参数，删除所有绑定的事件。

②有参数只删除参数类型的绑定事件。

③如果把在绑定时传递的处理函数作为第二个参数，只有特定的事件处理函数会被删除。

（2）移除bb9345e55eb71822850ff156dfde57c8元素中的其中一个事件

在绑定时要给匿名函数指定一个变量

$(function(){
      $("#btn").bind("click",myFun1=function(){
           //代码1
      }).bind("click",myFun1=function(){
           //代码2
      }）
})

单独移除某个绑定事件

$("#del1").click(function(){
      $("#btn").unbind("click",myFun2);
 })

注意：对于只需要触发一次就要立即解除绑定的情况，使用one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。即：在每个对象上，事件处理函数都只会被执行一次。one()方法的使用和bind()方法一样。

 

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!