Neueste Sammlung gängiger JavaScript-Ereignistypen

UI (Benutzeroberfläche) Ereignis, ausgelöst, wenn der Benutzer mit Elementen auf der Seite interagiert

Ladeereignis: wenn die Seite vollständig geladen ist , Das Ladeereignis im Fenster wird ausgelöst.

Entladeereignis: Wird ausgelöst, nachdem das Dokument vollständig entladen wurde. Wird immer dann ausgelöst, wenn der Benutzer von einer Seite zur anderen wechselt.

Resize-Ereignis: Wenn sich der Browser an eine neue Höhe oder Breite anpasst, wird das Resize-Ereignis ausgelöst. Achten Sie darauf, diesem Ereignis keine Berechnungslogik hinzuzufügen, um Leistungsprobleme zu vermeiden.

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

Scroll-Ereignis: Wird auf dem Element ausgelöst, wenn der Benutzer mit einer Flussleiste durch den Inhalt im Element scrollt.

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

Fokus-Ereignis, wird ausgelöst, wenn die Seite den Fokus erhält oder verliert.

Unschärfe-Ereignis: Wird ausgelöst, wenn das Element den Fokus verliert. Dieses Ereignis wird nicht von allen Browsern unterstützt.

Fokusereignis: wird ausgelöst, wenn ein Element den Fokus erhält. Dieses Ereignis sprudelt nicht und wird von allen Browsern unterstützt.

Focusin-Ereignis: Wird ausgelöst, wenn ein Element den Fokus erhält. Dieses Ereignis entspricht dem HTML-Ereignisfokus, aber es sprudelt. Die Browser, die dieses Ereignis unterstützen, sind IE5+, Safari5.1+, Opera11.5+ und Chrome.

Focusout-Ereignis: wird ausgelöst, wenn das Element verloren geht. Dieses Ereignis ist eine universelle Version der HTML-Ereignisunschärfe. Die Browser, die dieses Ereignis unterstützen, sind IE5+, Safari5.1+, Opera11.5+ und Chrome;

Maus- und Radereignisse

Klickereignis: Wird ausgelöst, wenn der Benutzer mit der linken Maustaste klickt oder die Eingabetaste drückt.

DbClick-Ereignis: wird ausgelöst, wenn der Benutzer mit der linken Maustaste doppelklickt.

MouseDown-Ereignis: Wird ausgelöst, wenn der Benutzer eine beliebige Maustaste drückt.

MouseEnter-Ereignis: Wird ausgelöst, wenn sich die Maus zum ersten Mal von außerhalb in den Elementbereich bewegt.

MouseLeave-Ereignis: Wird ausgelöst, wenn sich die Maus aus dem Bereich des Elements bewegt.

MouseMove-Ereignis: Wird wiederholt ausgelöst, wenn sich der Mauszeiger innerhalb des Elements bewegt.

MouseOut-Ereignis: Wird ausgelöst, wenn sich der Mauszeiger über einem Element befindet und der Benutzer es in ein anderes Element bewegt.

MouseOver-Ereignis: Wird ausgelöst, wenn sich der Mauszeiger außerhalb eines Elements befindet und der Benutzer ihn dann zum ersten Mal innerhalb der Grenzen eines anderen Elements bewegt.

MouseUp: Wird ausgelöst, wenn der Benutzer den Mauszeiger loslässt.

Mehrere Mauskoordinatenpositionen:

1. Koordinatenposition im Clientbereich

Mausereignisse treten an bestimmten Positionen im Browser-Ansichtsfenster auf. Diese Position wird in den Eigenschaften clientX und clientY des Ereignisobjekts gespeichert.

2. Seitenkoordinatenort

pageX und pageY können Ihnen sagen, wo auf der Seite das Ereignis aufgetreten ist. Mit anderen Worten: Diese beiden Eigenschaften stellen die Position des Cursors auf der Seite dar, sodass die Koordinaten von der Seite selbst und nicht vom linken oder oberen Rand des Ansichtsfensters berechnet werden.

Wenn die Seite nicht gescrollt wird, sind pageX und pageY gleich clientX und clientY.

IE8 und frühere Versionen unterstützen die Seitenkoordinatenposition nicht, sie kann jedoch anhand der Koordinatenposition des Clientbereichs und der Bildlaufinformationen berechnet werden.

        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. Bildschirmkoordinatenposition

Die Attribute screenX und screenY können die Koordinateninformationen des Mauszeigers relativ zum gesamten Bildschirm bestimmen, wenn ein Mausereignis auftritt.

Verwandte Empfehlungen:

Zusammenstellung gängiger JavaScript-fehleranfälliger Wissenspunkte

Detaillierte Interpretation von Ereignisflüssen und Ereignissen in JavaScript-Verarbeitungsprogramm (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonNeueste Sammlung gängiger JavaScript-Ereignistypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!