Analyse des Ereignismodells in js-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich das Ereignismodell in JavaScript vor, das einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf zurückgreifen

0 >

Ereignis ist der Moment, in dem der Browser mit dem Dokument interagiert, z. B. durch Klicken auf eine Schaltfläche, Ausfüllen eines Formulars usw. Es ist die Brücke der Kommunikation zwischen Javascript und HTML. DOM ist eine Baumstruktur, wenn Ereignisse gleichzeitig an beide übergeordneten Knoten gebunden sind und die untergeordneten Knoten ausgelöst werden. Die Reihenfolge, in der diese beiden Ereignisse auftreten, bezieht sich auf den Inhalt des Ereignisstroms, der die Reihenfolge beschreibt, in der die untergeordneten Knoten auftreten Seite wird akzeptiert. Der Ereignisfluss beschreibt die Reihenfolge, in der Ereignisse von der Seite empfangen werden. Interessanter ist jedoch, dass die Entwicklungsteams von IE und Netscape tatsächlich fast völlig gegensätzliche Konzepte vorgeschlagen haben. Der Ereignisfluss von IE ist ein Event-Bubbling-Flow, während der Ereignisfluss von Netscape Communicator ein Ereigniserfassungsfluss ist.

Der Ereignisfluss wird also hauptsächlich in zwei Typen unterteilt: Ereignis-Bubbling und Ereigniserfassung.

Der Ereignisfluss von IE wird als Event-Bubbling bezeichnet, d dokumentieren) ). Ein weiterer vom Netscape-Team vorgeschlagener Ereignisstrom heißt Ereigniserfassung. Die Idee der Ereigniserfassung besteht darin, dass weniger spezifische Knoten Ereignisse früher und die spezifischsten Knoten zuletzt empfangen sollten. Der Zweck der Erfassung besteht darin, ein Ereignis zu erfassen, bevor es sein beabsichtigtes Ziel erreicht.

Der durch Ereignisse auf DOM2-Ebene spezifizierte Ereignisfluss umfasst drei Phasen: Ereigniserfassungsphase, Zielphase und Ereignis-Bubbling-Phase. Das erste, was passiert, ist die Ereigniserfassung, die die Möglichkeit bietet, das Ereignis abzufangen. Dann empfängt das eigentliche Ziel das Ereignis. Die letzte Phase ist die Sprudelphase, in der Sie auf Ereignisse reagieren können.

1. DOM-Level-0-Ereignismodell

Das DOM-Level-0-Ereignismodell ist ein frühes Ereignismodell, das in diesem Modell auch als Ereignisse bezeichnet wird wird sich nicht ausbreiten, das heißt, es gibt kein Konzept für den Ereignisfluss. Die Funktion zum Abhören der Ereignisbindung ist relativ einfach. Um einen Ereignishandler mit Javascript anzugeben, müssen Sie zunächst einen Verweis auf das zu bedienende Objekt abrufen.

Jedes Element (einschließlich Fenster und Dokument) verfügt über eigene Ereignisbehandlungsattribute. Diese Attribute sind normalerweise alle in Kleinbuchstaben geschrieben, z. B. onclick. Sie können Ereignishandler angeben, indem Sie dieses Attribut auf eine Funktion setzen:

 btn = document.getElementById("myBtn"= "Clicked!"

Nach dem Login kopieren

//HTML事件处理程序<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

Nach dem Login kopieren

2 . Ereignismodell auf DOM2-Ebene

In diesem Modell ist es in drei Prozesse unterteilt: Ereigniserfassungsphase, Ereignisblasenphase in Zielphase 7;

Ereigniserfassungsphase. Das Ereignis breitet sich vom Dokument bis zum Zielelement aus und prüft, ob die übergebenen Knoten an die Ereignisüberwachungsfunktion gebunden sind, und führt sie gegebenenfalls aus.
Ereignisverarbeitungsphase (Sollphase). Wenn das Ereignis das Zielelement erreicht, wird die Abhörfunktion des Zielelements ausgelöst.
Blubbernde Phase des Ereignisses. Das Ereignis sprudelt vom Zielelement zum Dokument und prüft, ob die übergebenen Knoten an die Ereignisüberwachungsfunktion gebunden sind, und führt sie gegebenenfalls aus.

Die DOM2-Ebene definiert zwei Methoden zur Handhabung der Vorgänge zum Festlegen und Entfernen von Ereignishandlern: addEventListener() und removeEventListener(). Alle DOM-Knoten enthalten diese beiden Methoden und verfügen über drei Parameter: den Namen des zu behandelnden Ereignisses, die Funktion als Ereignishandler und einen booleschen Wert. Um dem Klickereignis einen Ereignishandler hinzuzufügen, können Sie Folgendes verwenden:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

Nach dem Login kopieren

Zu diesem Zeitpunkt ist die Ausführungsreihenfolge die sequentielle Ausführung: „myBtn“ „Hallo Kind ". Im IE ist die Ausführungsreihenfolge genau umgekehrt.

So entfernen Sie die Event-Listening-Funktion:

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};

Nach dem Login kopieren

"click", handler, btn.removeEventListener("click", handler, );

Nach dem Login kopieren

Sie können hier nur Funktionsausdrücke als Event-Handler verwenden, da RemoveEventListener () Beim Entfernen müssen die übergebenen Parameter mit denen übereinstimmen, die beim Hinzufügen der Anwendung verwendet wurden. Durch anonyme Funktionen hinzugefügte Ereignisüberwachungsfunktionen können nicht entfernt werden.

3. Ereignismodell im IE

IE verwendet zwei ähnliche Methoden wie im DOM: attachmentEvent() und detachEvent(). Beide Methoden akzeptieren dieselben zwei Parameter, den Event-Handler-Namen und die Event-Handler-Funktion. Da IE8 und frühere Versionen nur das Event-Bubbling unterstützen, werden über attachmentEvent() hinzugefügte Event-Handler zur Bubbling-Phase hinzugefügt. Wenn Sie attachmentEvent() verwenden, um der Schaltfläche einen Ereignishandler hinzuzufügen, ist dieser verfügbar:

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};
btn.attachEvent("onclick", handler);//添加事件处理程序btn.detachEvent("onclick", handler);//删除事件处理程序

Nach dem Login kopieren

Ereignisobjekt

DOM Das Ereignisobjekt in

Typ stellt den ausgelösten Ereignistyp dar
Ziel stellt das Ziel des Ereignisses dar
currentTarget stellt das Element dar, in dem der Event-Handler das Event gerade verarbeitet
cancelable (Boolean) 表明是否可以取消事件的默认行为
bubbles （Boolean）表明事件是否冒泡
perventDefault()取消事件的默认行为。如果cancelable为true，则可以使用这个方法
stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法。

IE中的事件对象

type表示被触发的事件类型
srcElement表示事件的目标
cancelBubble （Boolean）默认是false，将其设为true就可以取消事件冒泡
returnValue (Boolean) 默认是true，将其设置为false就可以取消事件的默认行为

有了上面的事件对象，就可以写出跨浏览器的事件对象封装成事件包裹了。

var EventUtil = {
    addHandler: function(element, type, handler){        
    if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler){        
    if (element.removeEventListener){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;                  //DOM0        }
    },

    getEvent: function(event){        
    return event ? event : window.event;
    },

    getTarget: function(event){        
    return event.target || event.srcElement;
    },

    preventDefault: function(event){        
    if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event){        
    if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }};

Nach dem Login kopieren

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！