Dernière collection de types d'événements JavaScript courants

UI (User Interface) Événement, déclenché lorsque l'utilisateur interagit avec des éléments de la page

Événement de chargement : lorsque la page est entièrement chargée , L'événement de chargement sur la fenêtre sera déclenché.

Événement de déchargement : déclenché après le déchargement complet du document. Se déclenche chaque fois que l'utilisateur passe d'une page à une autre.

Événement de redimensionnement : lorsque le navigateur s'ajuste à une nouvelle hauteur ou largeur, l'événement de redimensionnement est déclenché. Attention à ne pas ajouter de logique de calcul à cet événement pour éviter des problèmes de performances.

        EventUtil.addHandler(window, "resize", function (event) {
                //防抖函数
                //每次调用函数都会清除之前的计数器，并重新计数，计数完成时，执行操作。
            var timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () { //setTimeout返回唯一标识符，可以使用它来取消计数器
                    console.log("123");
                },500);
            }
        }());//此处的双括号表示，立即调用返回值

Événement Scroll : Lorsque l'utilisateur fait défiler le contenu dans l'élément avec une barre de flux, il est déclenché sur l'élément.

        EventUtil.addHandler(window, "scroll", function (event) {
            //函数节流
            var timer;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function () { //setTimeout返回唯一标识符，可以使用它来取消计数器
                    if (document.compatMode == "CSS1Compat") {
                        //标准模式
                        console.log("Left:" + document.documentElement.scrollLeft);
                        console.log("Top:" + document.documentElement.scrollTop);
                    }
                    else {
                        //混杂模式
                        console.log("Left:" + document.body.scrollLeft);
                        console.log("Top:" + document.body.scrollTop);
                    }
                }, 500);
            }     
        }());

Événement Focus, déclenché lorsque la page gagne ou perd le focus

Événement Flou : déclenché lorsque l'élément perd le focus. Cet événement ne fait pas de bulle ; tous les navigateurs le prennent en charge ;

Événement Focus : déclenché lorsqu'un élément obtient le focus. Cet événement ne fait pas de bulles et est pris en charge par tous les navigateurs ;

Événement Focusin : déclenché lorsqu'un élément obtient le focus. Cet événement est équivalent à l'événement HTML focus, mais il bouillonne. Les navigateurs qui prennent en charge cet événement sont IE5+ safari5.1+ Opera11.5+ et Chrome

Événement Focusout : déclenché lorsque l'élément est perdu. Cet événement est une version universelle du flou d'événement HTML. Les navigateurs qui prennent en charge cet événement sont IE5+ safari5.1+ Opera11.5+ et Chrome ;

Événements de souris et de molette

Événement Click : déclenché lorsque l'utilisateur clique sur le bouton gauche de la souris ou appuie sur la touche Entrée.

Événement DbClick : déclenché lorsque l'utilisateur double-clique sur le bouton gauche de la souris.

Événement MouseDown : déclenché lorsque l'utilisateur appuie sur n'importe quel bouton de la souris.

Événement MouseEnter : déclenché lorsque la souris se déplace pour la première fois dans la plage d'éléments depuis l'extérieur.

Événement MouseLeave : Déclenché lorsque la souris sort de la portée de l'élément.

Événement MouseMove : déclenché à plusieurs reprises lorsque le pointeur de la souris se déplace à l'intérieur de l'élément.

Événement MouseOut : déclenché lorsque le pointeur de la souris est sur un élément et que l'utilisateur le déplace vers un autre élément.

Événement MouseOver : déclenché lorsque le pointeur de la souris se trouve à l'extérieur d'un élément, puis que l'utilisateur le déplace dans les limites d'un autre élément pour la première fois.

MouseUp : se déclenche lorsque l'utilisateur relâche le pointeur de la souris.

Plusieurs positions de coordonnées de la souris :

1. Position des coordonnées de la zone client

Les événements de la souris se produisent à des positions spécifiques dans la fenêtre d'affichage du navigateur. Cette position est enregistrée dans les propriétés clientX et clientY de l'objet événement.

2. Position des coordonnées de la page

pageX et pageY peuvent vous indiquer où l'événement s'est produit sur la page. En d'autres termes, ces deux propriétés représentent la position du curseur dans la page, donc les coordonnées sont calculées à partir de la page elle-même plutôt qu'à partir du bord gauche ou supérieur de la fenêtre.

Lorsque la page ne défile pas, pageX et pageY sont égaux à clientX et clientY.

IE8 et les versions antérieures ne prennent pas en charge la position des coordonnées de page, mais elles peuvent être calculées à l'aide de la position des coordonnées de la zone client et des informations de défilement.

        EventUtil.addHandler(document.getElementById("p1"), "click", function (event) {
            //兼容IE8及之前版本
            event = EventUtil.getEvent(event);
            var pageX = event.pageX,
                pageY = event.pageY;
            if (pageX === undefined) {
                pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
            }
            if (pageY === undefined) {
                pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
            }
            //console.log("pageX:" + pageX);
            //console.log("pageY:" + pageY);
        });

3. Position des coordonnées de l'écran

Les attributs screenX et screenY peuvent déterminer les informations de coordonnées du pointeur de la souris par rapport à l'ensemble de l'écran lorsqu'un événement de souris se produit.

Recommandations associées :

Compilation de points de connaissances JavaScript courants sujets aux erreurs

Interprétation détaillée des flux d'événements et des événements dans Programme de traitement JavaScript (tutoriel graphique)

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!