Share
Hallo und herzlich willkommen zur "JavaScript and the DOM" -Serie. Letztes Mal haben wir uns mit einigen JavaScript-Grundlagen befasst und verschiedene Aspekte des Dokumentobjektmodells angesprochen, einschließlich des Zugriffs auf Knoten und das Durchlaufen des DOM. Heute werden wir über die Manipulation von Elementen im DOM berichten und das Browserereignismodell besprechen.
In der letzten Lektion haben wir die Schritte beschrieben, die beim Zugriff auf eine Sammlung von DOM-Knoten oder auf einen einzelnen DOM-Knoten erforderlich sind. Die wahre Magie entsteht, wenn Sie dann bestimmte Eigenschaften bearbeiten, was zu einem Verhalten führt, das allgemein als "Verhalten" bezeichnet wird..
Jeder einzelne DOM-Knoten verfügt über eine Sammlung von Eigenschaften. Die meisten dieser Eigenschaften bieten Abstraktionen für bestimmte Funktionen. Wenn Sie beispielsweise ein Absatzelement mit der ID 'intro' haben, können Sie die Farbe dieses Elements ganz einfach über die DOM-API ändern:
Accentsconagua
document.getElementById ('intro'). style.color = '# FF0000'; Zur Veranschaulichung der Objekt- / Eigenschaftennatur dieser API ist es möglicherweise einfacher zu verstehen, wenn wir sie aufteilen, indem wir jedes Objekt einer Variablen zuweisen:
var myDocument = Dokument; var myIntro = myDocument.getElementById ('intro'); var myIntroStyles = meinIntro.style; // Und jetzt können wir die Farbe einstellen: myIntroStyles.color = '# FF0000'; Da wir nun einen Verweis auf das 'style'-Objekt des Absatzes haben, können wir andere CSS-Stile hinzufügen:
myIntroStyles.padding = '2px 3px 0 3px'; myIntroStyles.backgroundColor = '#FFF'; myIntroStyles.marginTop = '20px';
Wir verwenden hier nur grundlegende CSS-Eigenschaftsnamen. Der einzige Unterschied besteht darin, dass dort, wo normalerweise ein Bindestrich ('-') zu finden wäre, der Text in Kamel gehüllt ist. Anstelle von 'margin-top' verwenden wir 'marginTop'. Folgendes zum Beispiel, würde nicht funktionieren und würden einen Syntaxfehler erzeugen:
myIntroStyles.padding-top = '10em'; // Erzeugt einen Syntaxfehler: // - Das '-' Zeichen ist der Minus-Operator in JavaScript. // - Außerdem gibt es keinen solchen Eigenschaftennamen.
Auf die Eigenschaften kann auf eine Array-Art zugegriffen werden. Mit diesem Wissen könnten wir also eine kleine Funktion erstellen, um jeden Stil eines gegebenen Elements zu ändern:
function changeStyle (elem, property, val) elem.style [Eigenschaft] = Wert; // Beachten Sie die eckigen Klammern für den Zugriff auf die Eigenschaft // Sie würden das obige Plugin folgendermaßen verwenden: var myIntro = document.getElementById ('intro'); // Grab Intro Absatz changeStyle (myIntro, 'color', 'red'); Dies ist nur ein Beispiel - um ehrlich zu sein, ist dies wahrscheinlich keine sehr nützliche Funktion, da es syntaktisch schneller ist, die zuvor gezeigten herkömmlichen Mittel zu verwenden (z. elem.style.color = 'rot').
Neben der Eigenschaft 'style' gibt es viele andere, mit denen Sie bestimmte Aspekte eines Knotens / Elements bearbeiten können. Wenn Sie Firebug installiert haben, sollten Sie versuchen, ein Element zu untersuchen. Klicken Sie dann auf die Registerkarte "DOM" (normalerweise rechts oder unterhalb der Elementanzeige), um alle seine Eigenschaften anzuzeigen:
Auf alle Eigenschaften kann unter Verwendung der herkömmlichen Punktnotation (z. B. Element.tabIndex) zugegriffen werden. Nicht alle Eigenschaften sind primitive Datentypen (Zeichenfolgen, Zahlen, Boolesche Werte usw.). Die "style" -Eigenschaft zum Beispiel, die wir zuvor besprochen haben, ist ein Objekt, das seine eigenen Eigenschaften enthält. Viele Eigenschaften eines Elements sind nur lesbar. Ich meine damit, dass Sie ihren Wert nicht ändern können. Beispielsweise können Sie die 'parentNode'-Eigenschaft eines Knotens nicht direkt ändern. Der Browser gibt normalerweise einen Fehler aus, wenn Sie versuchen, eine dieser schreibgeschützten Eigenschaften zu ändern: z. FEHLER: "Festlegen einer Eigenschaft, die nur einen Getter enthält". Es ist nur etwas zu beachten ...
Eine häufige Anforderung ist, den Inhalt eines Elements zu ändern. Es gibt verschiedene Möglichkeiten, dies zu tun. Am einfachsten ist es, die 'innerHTML'-Eigenschaft wie folgt zu verwenden:
var myIntro = document.getElementById ('intro'); // Ersetzen des aktuellen Inhalts durch neuen Inhalt: myIntro.innerHTML = 'Neuer Inhalt für tolle Absatz!'; // Hinzufügen zum aktuellen Inhalt: myIntro.innerHTML + = '… etwas mehr Inhalt…'; Das einzige Problem bei dieser Methode ist, dass sie in keinem Standard angegeben ist und nicht in der DOM-Spezifikation enthalten ist. Wenn Sie sich nicht darum gekümmert haben, verwenden Sie es. Es ist normalerweise ohnehin viel schneller als herkömmliche DOM-Methoden, die wir als nächstes behandeln werden.
Beim Erstellen von Inhalten über die DOM-API müssen Sie zwei verschiedene Knotentypen kennen, einen Elementknoten und einen Textknoten. Es gibt viele andere Arten von Knoten, aber diese beiden sind jetzt die einzig wichtigen.
Um ein Element zu erstellen, verwenden Sie die Methode 'createElement' und zum Erstellen eines Textknotens die Methode 'createTextNode'. Beide werden im Folgenden gezeigt:
var myIntro = document.getElementById ('intro'); // Wir möchten dem Absatz etwas Inhalt hinzufügen: var someText = 'Dies ist der Text, den ich hinzufügen möchte'; var textNode = document.createTextNode (someText); myIntro.appendChild (textNode); Hier verwenden wir die Methode 'appendChild', um unseren neuen Textknoten zum Absatz hinzuzufügen. Auf diese Weise dauert es etwas länger als die nicht standardmäßige innerHTML-Methode. Dennoch ist es wichtig, beide Möglichkeiten zu kennen, damit Sie die richtige Entscheidung treffen können. Hier ist ein fortgeschritteneres Beispiel mit DOM-Methoden:
var myIntro = document.getElementById ('intro'); // Wir möchten dem Absatz einen neuen Anker hinzufügen: // Zuerst erstellen wir das neue Ankerelement: var myNewLink = document.createElement ('a'); // myNewLink.href = "http://google.com"; // myNewLink.appendChild (document.createTextNode ('Visit Google')); // Google besuchen // Jetzt können wir es an den Absatz anhängen: myIntro.appendChild (myNewLink); Es gibt auch eine 'insertBefore'-DOM-Methode, die ziemlich selbsterklärend ist. Mit diesen beiden Methoden ('insertBefore' & 'appendChild') können wir unsere eigene 'insertAfter'-Funktion erstellen:
// "Target" ist das Element, das sich bereits im DOM befindet // "Bullet" ist das Element, in das die Funktion insertAfter (target, bullet) target.nextSibling eingefügt werden soll? target.parentNode.insertBefore (bullet, target.nextSibling): target.parentNode.appendChild (bullet); // Wir verwenden einen ternären Operator in der obigen Funktion: // Sein Format: CONDITION? EXPRESSION BEI WAHR: EXPRESSION BEI FALSCH;
Die obige Funktion prüft, ob das nächste Geschwister des Ziels im DOM vorhanden ist. Wenn es existiert, wird der Knoten "Aufzählungszeichen" vor dem nächsten Geschwister des Ziels eingefügt. Andernfalls wird angenommen, dass das Ziel das letzte untergeordnete Element eines Elements ist Es ist in Ordnung, die Kugel als Kind der Eltern anzuhängen. Die DOM-API gibt uns keine 'insertAfter'-Methode, da keine Notwendigkeit besteht - wir können sie selbst erstellen.
Es gibt noch einiges mehr über die Bearbeitung von Elementen im DOM zu lernen, aber das oben genannte sollte eine ausreichende Grundlage sein, auf der Sie aufbauen können.
Browserereignisse bilden den Kern jeder Webanwendung und der meisten JavaScript-Verbesserungen. Durch diese Ereignisse definieren wir, wann etwas passieren wird. Wenn sich in Ihrem Dokument eine Schaltfläche befindet und Sie beim Anklicken eine Formularvalidierung durchführen müssen, verwenden Sie das Ereignis "click". Nachfolgend finden Sie eine Übersicht über die meisten Standard-Browserereignisse:
Hinweis: Wie wir beim letzten Mal besprochen haben, sind das DOM und die JavaScript-Sprache zwei separate Entitäten. Browserereignisse sind Teil der DOM-API, sie sind nicht Teil von JavaScript.
Es gibt viele weitere Veranstaltungen zur Auswahl. Die oben gezeigten sind die wichtigsten, auf die Sie im JavaScript-Code häufig stoßen. Beachten Sie, dass einige von ihnen subtile Unterschiede zwischen Browsern aufweisen. Beachten Sie auch, dass viele Browser proprietäre Ereignisse implementieren. Beispielsweise gibt es eine Reihe von Gecko-spezifischen Ereignissen wie "DOMContentLoaded" oder "DOMMouseScroll". Weitere Informationen hierzu finden Sie hier: https://developer.mozilla.org / de / Gecko-Specific_DOM_Veranstaltungen
Wir haben die tatsächlichen Ereignisse behandelt, aber wir haben noch nicht das Anhängen einer Funktion an ein Ereignis besprochen. Hier passiert die Magie. Die oben aufgeführten Ereignisse treten unabhängig davon auf, ob Sie JavaScript geschrieben haben oder nicht. Um ihre Möglichkeiten nutzen zu können, müssen Sie "Event-Handler" registrieren. Dies ist ein fantastischer Begriff, um eine Funktion zu beschreiben, die zur Verarbeitung eines Ereignisses verwendet wird. Hier ist ein einfaches Beispiel mit der Basic Ereignisregistrierungsmodell (auch als "traditionelle Ereignisregistrierung" bezeichnet):
Grundlegende Ereignisregistrierung:
// JavaScript: var myElement = document.getElementById ('mein-button'); // Diese Funktion wird unser Event-Handler sein: function buttonClick () alert ('Sie haben gerade auf die Schaltfläche geklickt!'); // Dies ist der Ereignisregistrierungsteil: myElement.onclick = buttonClick; Wir haben eine HTML-Schaltfläche mit der ID "my-button" und mit dem Befehl "document.getElementById" darauf zugegriffen. Dann erstellen wir eine neue Funktion, die später der DOM-Eigenschaft 'onclick' der Schaltfläche zugewiesen wird. Das ist alles dazu!
Das "grundlegende Ereignisregistrierungsmodell" ist so einfach wie es nur geht. Sie fügen dem Ereignis, das Sie suchen, ein "on" voran und greifen darauf als Eigenschaft des Elements zu, mit dem Sie gerade arbeiten. Dies ist im Wesentlichen die unauffällige Version, in der Sie Folgendes tun (was ich nicht empfehlen kann):
Das Inline-Event-Handling (mit HTML-Attributen) ist sehr aufdringlich und macht die Pflege Ihrer Website erheblich schwieriger. Es ist besser, unauffälliges JavaScript zu verwenden, das alles in den entsprechenden ".js" -Dateien enthält, die bei Bedarf in das Dokument eingefügt werden können. Während wir uns mit dem Thema unauffälliges JavaScript beschäftigen, möchte ich die weit verbreitete falsche Auffassung korrigieren, dass Bibliotheken wie jQuery es ermöglichen, "unauffällig zu codieren" - das stimmt nicht. Wenn Sie jQuery verwenden, ist es genauso einfach, die Dinge falsch zu machen. Der Grund, aus dem Sie keine Inline-Ereignisbehandlung verwenden sollten, ist genau derselbe wie der Grund, aus dem Sie keine Inline-CSS-Stile anwenden sollten (using)..
Erweiterte Veranstaltungsregistrierung:
Lassen Sie sich nicht von diesem Namen in die Irre führen, nur weil er als "fortgeschritten" bezeichnet wird, bedeutet dies nicht, dass er besser zu verwenden ist. Tatsächlich ist die oben diskutierte Technik ("grundlegende Ereignisregistrierung") die meiste Zeit perfekt geeignet. Die Verwendung der grundlegenden Technik hat jedoch eine wichtige Einschränkung. Sie können nicht mehr als eine Funktion an ein Ereignis binden. Das ist eigentlich nicht so schlimm, weil Sie einfach eine beliebige Anzahl anderer Funktionen innerhalb dieser einzelnen Funktion aufrufen können. Wenn Sie jedoch mehr Kontrolle benötigen, können Sie die Handler registrieren, indem Sie das "erweiterte Ereignisregistrierungsmodell" eingeben..
Mit diesem Modell können Sie mehrere Handler an ein einzelnes Ereignis binden. Dies bedeutet, dass beim Auftreten eines Ereignisses mehrere Funktionen ausgeführt werden. Darüber hinaus können Sie mit diesem Modell die gebundenen Ereignishandler problemlos entfernen.
Streng genommen gibt es in dieser Kategorie zwei verschiedene Modelle. die W3C und Microsoft. Das W3C-Modell wird von allen modernen Browsern außer dem IE unterstützt, und das Microsoft-Modell wird nur vom IE unterstützt. So verwenden Sie das W3C-Modell:
// FORMAT: target.addEventListener (Typ, Funktion, UseCapture); // Beispiel: var myIntro = document.getElementById ('intro'); myIntro.addEventListener ('click', introClick, false); Und hier ist dasselbe, aber für IE (Microsofts Modell):
// FORMAT: target.attachEvent ('on' + type, function); // Beispiel: var myIntro = document.getElementById ('intro'); myIntro.attachEvent ('onclick', introClick); Und hier ist die 'IntroClick'-Funktion:
function introClick () alert ('Sie haben auf den Absatz geklickt!'); Da keines der Modelle in allen Browsern funktioniert, ist es eine gute Idee, beide in einer benutzerdefinierten Funktion zu kombinieren. Hier ist eine sehr einfache 'addEvent'-Funktion, die browserübergreifend funktioniert:
function addEvent (elem, type, fn) if (elem.attachEvent) elem.attachEvent ('on' + type, fn); Rückkehr; if (elem.addEventListener) elem.addEventListener (type, fn, false); Die Funktion sucht nach den Eigenschaften 'attachEvent' und 'addEventListener' und verwendet dann eines der von diesem Test abhängigen Modelle. Mit beiden Modellen können auch Ereignishandler entfernt werden, wie in dieser 'removeEvent'-Funktion gezeigt:
function removeEvent (elem, type, fn) if (elem.detachEvent) elem.detachEvent ('on' + type, fn); Rückkehr; if (elem.removeEventListener) elem.removeEventListener (type, fn, false); Sie würden die Funktionen folgendermaßen verwenden:
var myIntro = document.getElementById ('intro'); addEvent (myIntro, "click", function () alert ('YOU CLICKED ME !!!');); Beachten Sie, dass wir als dritten Parameter eine namenlose Funktion übergeben haben. Mit JavaScript können Sie Funktionen definieren und ausführen, ohne sie zu benennen. Funktionen dieses Typs werden als "anonyme Funktionen" bezeichnet und können sehr nützlich sein, insbesondere wenn Sie eine Funktion als Parameter an eine andere Funktion übergeben müssen. Wir hätten unsere (zuvor definierte) 'introClick'-Funktion einfach als dritten Parameter verwenden können, aber manchmal ist es praktischer, eine anonyme Funktion zu verwenden.
Wenn Sie möchten, dass eine Aktion nur bei einem Ereignis ausgeführt wird, wenn Sie zum ersten Mal angeklickt werden, können Sie Folgendes tun:
// Beachten Sie, dass wir die Funktionen addEvent / removeEvent bereits definiert haben // (Um sie verwenden zu können, müssen sie enthalten sein) var myIntro = document.getElementById ('intro'); addEvent (myIntro, "click", oneClickOnly); function oneClickOnly () alert ('WOW!'); removeEvent (myIntro, "click", oneClickOnly); Wir entfernen den Handler, sobald das Ereignis zum ersten Mal ausgelöst wird. Im obigen Beispiel konnten wir keine anonyme Funktion verwenden, da wir einen Verweis auf die Funktion ('oneClickOnly') beibehalten mussten, um sie später entfernen zu können. Das heißt, es ist tatsächlich möglich, mit einer unbenannten (anonymen) Funktion zu erreichen:
addEvent (myIntro, 'click', function () alert ('WOW!'); removeEvent (myIntro, 'click', arguments.callee);); Wir sind hier ziemlich frech, indem wir auf die Eigenschaft 'callee' des Objekts 'arguments' verweisen. Das 'arguments'-Objekt enthält alle übergebenen Parameter einer ANY-Funktion und enthält auch einen Verweis auf die Funktion selbst (' callee '). Dadurch wird die Definition einer benannten Funktion (z. B. der zuvor gezeigten 'oneClickOnly'-Funktion) vollständig eliminiert..
Abgesehen von den offensichtlichen syntaktischen Unterschieden zwischen der W3C- und der Microsoft-Implementierung gibt es noch einige andere bemerkenswerte Unstimmigkeiten. Wenn Sie eine Funktion an ein Ereignis binden, sollte die Funktion im Kontext des Elements ausgeführt werden. Das Schlüsselwort 'this' in der Funktion sollte also auf das Element verweisen. Wenn entweder das grundlegende Ereignisregistrierungsmodell oder das erweiterte W3C-Modell verwendet wird, funktioniert dies ohne Fehler. Die Implementierung von Microsoft schlägt jedoch fehl. Hier ist ein Beispiel von dir sollte innerhalb der Ereignisbehandlungsfunktionen:
function myEventHandler () this.style.display = 'none'; // Funktioniert korrekt, "this" verweist auf das Element: myIntro.onclick = myEventHandler; // funktioniert korrekt, 'this' referenziert das Element: myIntro.addEventListener ('click', myEventHandler, false); // funktioniert NICHT korrekt, 'this' referenziert das Window-Objekt: myIntro.attachEvent ('onclick', myEventHandler); Es gibt verschiedene Möglichkeiten, dieses Problem zu vermeiden / zu beheben. Die einfachste Option ist die Verwendung des Basismodells. Bei diesem Modell gibt es so gut wie keine Inkonsistenzen zwischen Browsern. Wenn Sie jedoch das erweiterte Modell verwenden möchten und das Schlüsselwort 'this' benötigen, um das Element korrekt zu referenzieren, sollten Sie sich einige der weiter verbreiteten 'addEvent'-Funktionen ansehen, insbesondere die von John Resig oder Dean Edwards (sein Dokturname) Verwenden Sie nicht einmal das erweiterte Modell, super!).
Ein wichtiger Aspekt der Ereignisbehandlung, über den wir noch sprechen müssen, ist das sogenannte "Ereignisobjekt". Immer wenn Sie eine Funktion an ein Ereignis binden, d. H. Wenn Sie einen Ereignishandler erstellen, wird der Funktion ein Objekt übergeben. Dies geschieht nativ, so dass Sie keine Maßnahmen ergreifen müssen, um es herbeizuführen. Dieses Ereignisobjekt enthält eine Vielzahl von Informationen zu dem gerade aufgetretenen Ereignis. Es enthält auch ausführbare Methoden, die verschiedene Verhaltensweisen für das Ereignis haben. Es ist jedoch nicht überraschend, dass Microsoft seinen eigenen Weg gewählt hat, um dieses "Feature" zu implementieren. IE-Browser übergeben dieses Ereignisobjekt nicht, stattdessen müssen Sie als Eigenschaft des globalen Fensterobjekts darauf zugreifen. Das ist nicht wirklich ein Problem, es ist nur ein Ärgernis:
function myEventHandler (e) // Beachten Sie das 'e' -Argument… // Wenn diese Funktion aufgerufen wird, // wird das Ereignisobjekt ausgelöst, und das Ereignisobjekt wird übergeben (in W3C-kompatiblen Agenten). // Let's make ' e 'browserübergreifend: e = e || window.event; // Jetzt können wir sicher in allen modernen Browsern auf 'e' verweisen. // Wir würden unsere Funktion hier unten an ein Ereignis binden ...
Um das Vorhandensein des 'e' -Objekts (das "Ereignisobjekt") zu überprüfen, verwenden wir einen OR-Operator (logisch), der im Wesentlichen Folgendes vorschreibt: Wenn 'e' ein "falscher" Wert ist (null, undefined, 0) usw.) weisen Sie dann 'window.event' zu 'e' zu; Ansonsten benutzen Sie einfach 'e'. Dies ist eine schnelle und einfache Möglichkeit, das reale Ereignisobjekt in einer browserübergreifenden Umgebung abzurufen. Wenn Sie nicht mit der Verwendung logischer Operatoren außerhalb einer IF-Anweisung vertraut sind, könnte dieses Konstrukt für Sie besser geeignet sein:
if (! e) e = window.event; // Es ist keine ELSE-Anweisung erforderlich, da 'e' bereits in anderen Browsern definiert wird
Einige der nützlichsten Befehle und Eigenschaften dieses Ereignisobjekts sind leider in Browsern inkonsistent implementiert (IE und andere). Das Abbrechen der Standardaktion eines Ereignisses kann beispielsweise mit der Methode 'reflectDefault ()' des Ereignisobjekts erreicht werden. Im IE ist dies jedoch nur mit der 'returnValue'-Eigenschaft des Objekts möglich. Wir müssen also beide verwenden, um alle Browser unterzubringen:
Funktion myEventHandler (e) e = e || window.event; // Verhindern der Standardaktion eines Ereignisses: if (e.preventDefault) e.preventDefault (); else e.returnValue = false;
Die Standardaktion eines Ereignisses ist das, was normalerweise als Folge des Auslösens dieses Ereignisses geschieht. Wenn Sie auf einen Anker-Link klicken, navigiert der Browser standardmäßig zu der im Attribut 'href' dieses Links angegebenen Position. Manchmal möchten Sie diese Standardaktion jedoch deaktivieren.
Die Belästigung 'returnValue' / 'reflectDefault' ist nicht von alleine; Viele andere Eigenschaften des Ereignisobjekts sind inkonsistent implementiert. Wenn also / else / oder das Überprüfungsmodell eine erforderliche Aufgabe ist, ist dies nicht unbedingt erforderlich.
Viele der heutigen JavaScript-Bibliotheken normalisieren das Ereignisobjekt, was bedeutet, dass Befehle wie 'e.preventDefault' im IE verfügbar sind. Beachten Sie jedoch, dass hinter den Kulissen die 'returnValue'-Eigenschaft noch verwendet wird.
Ereignisblubbern, auch bekannt als "Ereignisausbreitung", ist, wenn ein Ereignis ausgelöst wird und dieses Ereignis dann durch das DOM "sprudelt". Das erste, was zu beachten ist, ist, dass nicht alle Ereignisse blubbern, aber für diejenigen, die dies tun, funktioniert es folgendermaßen:
Das Ereignis wird auf dem Zielelement ausgelöst. Das Ereignis wird dann bei jedem Vorfahren dieses Elements ausgelöst - das Ereignis sprudelt durch das DOM, bis es das oberste Element erreicht:
Wie in der obigen Grafik gezeigt, wird beim Klicken auf einen Anker in einem Absatz zuerst das Klickereignis des Ankers ausgelöst. Anschließend wird das Klickereignis für Absätze ausgelöst, bis das body-Element erreicht wird (der body ist das höchste DOM-Element) das hat ein Klickereignis).
Diese Ereignisse werden in dieser Reihenfolge ausgelöst. Sie treten nicht alle gleichzeitig auf.
Die Vorstellung von Ereignisblubbern mag auf den ersten Blick nicht viel Sinn machen, aber irgendwann wird klar, dass dies ein grundlegender Bestandteil dessen ist, was wir unter "normalem Verhalten" verstehen. Wenn Sie einen Handler an das Klickereignis des Absatzes binden, von dem erwartet wird, dass er ausgelöst wird, wenn auf den Absatz geklickt wird, richtig? Nun, genau das gewährleistet "Event Bubbling" - wenn der Absatz mehrere untergeordnete Elemente hat (s,
Dieses Sprudelverhalten kann zu jeder Zeit während des Prozesses abgebrochen werden. Wenn Sie möchten, dass das Ereignis nur bis zum Absatz sprudelt, jedoch nicht weiter (nicht zum Hauptteil), können Sie eine andere nützliche Methode im Ereignisobjekt "stopPropagation" verwenden:
Funktion myParagraphEventHandler (e) e = e || window.event; // Stoppt das Sprudeln des Ereignisses: if (e.stopPropagation) // W3C-kompatible Browser: e.stopPropagation (); else // IE: e.cancelBubble = true; // Die Funktion wäre an das Klickereignis des Absatzes gebunden: // Mit unserer benutzerdefinierten addEvent-Funktion: addEvent (document.getElementsByTagName ('p') [0], 'click', myParagraphEventHandler); Nehmen wir an, Sie haben zum Beispiel eine riesige Tabelle mit vielen Datenzeilen. Binden Sie einen Click-Ereignishandler an jeden einzelnen
var myTable = document.getElementById ('meine-Tabelle'); myTable.onclick = function () // Umgang mit Inkompatibilitäten von Browsern: e = e || window.event; var targetNode = e.target || e.srcElement; // Testen Sie, ob ein TR angeklickt wurde: if (targetNode.nodeName.toLowerCase () === 'tr') alert ('Sie haben auf eine Tabellenzeile geklickt!'); Die Veranstaltungsdelegation ist auf das Sprudeln von Ereignissen angewiesen. Der obige Code würde nicht funktionieren, wenn das Bubbling vor dem Erreichen des Tabellenknotens gestoppt wurde.
Wir haben behandelt, wie man DOM-Elemente manipuliert, und wir haben das Browser-Ereignismodell ausführlich diskutiert. Ich hoffe du hast heute etwas gelernt! Wenn Sie Fragen haben, zögern Sie bitte nicht zu fragen.
