Document 2023 – Teil 5: Event Erfassung und Bubbling

1. Kurseinführung – Einfangen und Capturing: Willkommen, willkommen, willkommen zu einer weiteren sehr spannenden Klasse und einer ganzen Serie über das DOM, das Document Object Model. Ich bin Clyde, ich werde dein Lehrer sein und Gerst Verlust wird sehr weit fortgeschritten sein. Aber keine Sorge, wenn Sie neu in der Entwicklung sind, werde ich Ihnen die Grundlagen erklären. Aber wenn du ein neuer Entwickler bist und mir in meinen anderen vorherigen Klassen nicht gefolgt bist. Ich ermutige Sie, diese zuerst zu tun, weil sie alle aufeinander aufbauen , um zu diesem Punkt zu kommen, indem Sie sagen, dass alle Seiten sind, worum es in dieser Klausel geht? Nun, ich gehe einen Schritt zurück. Sie wissen, dass die verschiedenen Objekte im DOM, richtig? Wir haben native Objekte und wir haben JavaScript-Objekte, die sich voneinander unterscheiden. Und sie alle haben ihre eigenen Eigenschaften und Methoden. Diese Eigenschaften und Methoden sind das Ergebnis der sogenannten Vererbung. Und es ist sehr wichtig für Sie, diese hierarchische Struktur zu verstehen, weshalb ich in dieser Klasse anfangen werde, zu erklären, was die hierarchische Struktur ist und was ich mit Vererbung meine. Aber danach diskutieren wir zwei sehr, sehr wichtige Konzepte, wenn es um Ereignisse geht. Denken Sie daran, in der vorherigen Klasse haben wir Ereignisse diskutiert, eine Menge Detail. Nun, du würdest mir zustimmen, dass Ereignisse irgendwie von irgendwoher kommen müssen, oder? Nun, das ist eine Art und Weise wird als Ereigniserfassung bekannt. Es muss irgendwann anfangen und runter zu welchem Element das Ereignis ausgelöst hat, richtig? Wenn es eine Schaltfläche ist, stellen Sie ein div-Tag dar, zum Beispiel, lassen Sie uns gehen, um den ganzen Weg bis zum Ende des Tages zu reisen. Das ist als Ereigniserfassung bekannt. Auf der anderen Seite, auf der Kehrseite der Münze, haben wir Event-Bubbling. Und das ist ein Konzept, dass Ereignisse den DOM-Baum aufblasen und deshalb ist es wichtig, über die Navigation im DOM zu wissen, was wir auch in einer vorherigen Klasse behandelt haben. Also wirklich dieser Kurs wird schwer sein. Ich werde es auf einem sehr, sehr lustigen und sehr intuitiven Niveau erklären . Also mach dir keine Sorgen, wenn du nicht selten in anderen Klassen gefolgt bist, es sei denn, du fängst wirklich an. Und ich ermutige Sie, das vielleicht jetzt innezuhalten und dann zurückzugehen und es zu genießen. Aber wenn du Noten gefolgt bist, aber weitergehst, wenn du gut mit der Entwicklung bist, Great, wirst du etwas Neues lernen. Wirklich Konflikte. Wir werden praktische Beispiele zerschneiden. Ich werde dir Herausforderungen geben. Das wird ziemlich ehrlich zu den Audios Ihrer Schüler sein. Und wir sehen uns in der Filter-Lytik. 2. JavaScript-Objekte: Dies wird ein unglaublich interessanter Abschnitt sein, ziemlich fortgeschritten oder kann enden. Und bevor wir in komplizierte Diskussionen über Hierarchien und Prototypen springen, möchte ich zur Konsole springen. Ich möchte Ihnen zeigen, warum praktisch eine wichtige Sache werden kann. Und was ich tun will, ist, dass ich zwei Dinge tun will. Jetzt. Ich möchte ein JavaScript-Objekt erstellen und auf seinen Prototyp zugreifen. Und ich möchte ein DOM-Objekt erstellen und auf seinen Prototyp zugreifen. By the way, wenn Sie nicht zu sicher sind, was ein Prototyp ist, ein gehen in eine Menge Detail in meinem JavaScript komplette Großmeister-Kurs. Also bitte überprüfen Sie es, wenn Sie interessiert sind. Wenn Sie wissen, was Prototypen sind, großartig, werden Sie in der Lage sein, mitzuverfolgen. Wenn Sie sich nicht ganz sicher sind und Sie nicht wollen, um meinen Kurs auszutrocknen, um es einfach schnell zu googeln. Kurz gesagt, Prototyp ist einfach wie eine Periode, von der man etwas erbt. Also, wenn ein Objekt nicht über diese genaue funktionale Eigenschaft verfügt, sind Sie nach Pässen ziemlich viel gehen, um die Prototypkette zu arbeiten , um zu versuchen, es zu wenig Eigenschaft zu finden, die Sie oft sind. So wie auch immer, hier sind wir in einem Flugzeug-Browser. Ich will nur die Konsole öffnen und zwei Dinge programmieren, da ich sehr, sehr schnell verletzt werde. Gehen wir zur Konsole. Dock das einfach in einem neuen Fenster an. Da gehen wir. Und jetzt fangen wir an zu codieren. Und lassen Sie mich hier hineinzoomen, nur damit es leichter zu sehen ist. Okay, das erste, was ich tun werde, ist, ein JavaScript-Objekt zu erstellen. Und das definiert Objekt ist Hund. Und wir können einfach sagen, dass dieser Hund einfach genug ist, oder? Aber haben Sie sich jemals gefragt, warum wir eine ganze Reihe von Eigenschaften und Methoden direkt aus der Box haben . Zum Beispiel können wir auf unser Hundeobjekt zugreifen und all diese Eigenschaften und Methoden betrachten. Sie sind eine Tonne von ihnen. So können wir zum Beispiel auf Großbuchstaben zugreifen. Wir führen das aus, und natürlich bekommen wir Wolf, aber jetzt alle in Großbuchstaben. Warum ist das? Nun, der Ausgangspunkt ist, Prototypen zu verstehen. Wenn wir auf unser Hundeobjekt zugreifen und wir uns dessen Prototyp ansehen. Und wir haben das auf dem Bildschirm geliebt. Wir erhalten dieses String-Objekt. Jetzt ist das String-Objekt nativ in JavaScripts. Und wenn wir dieses Objekt öffnen, hat es natürlich eine ganze Reihe von Eigenschaften und Methoden, auf die dieser Hund Zugriff hat. Wenn wir also nach unten scrollen, sollten wir zwei Großbuchstaben sehen. Und da ist es, zwei Großbuchstaben. Deshalb haben wir uns bestimmte Dinge direkt aus der Box zur Verfügung. Und das ist, wie ich bereits erwähnt habe, JavaScript. Aber jetzt lassen Sie uns ein DOM-Objekt erstellen, ist es in einer Variablen namens p definiert, und in dieser Instanz listet xs auf. Ich werde Objekte dokumentieren und Leads erstellen ein Element. Sie werden aus Teil 1 wissen, dass dies ein DOM-API-Methode erstellen Element ist. So ziemlich cool, nicht wahr? Wir haben gerade unser Objekt erstellt. Aber jetzt, wenn wir versuchen, auf unser Absatzobjekt zuzugreifen, und wieder versuchen wir, jetzt die gleiche Funktion auszuführen wie mit Hund. Wir erhalten einen Typfehler in Großbuchstaben ist keine Funktion. Was ist in dieser Art von seltsam? Wir werden wieder steiles Ufer. Schauen wir uns seinen Prototyp an. So greifen wir auf unser Objekt zu und betrachten seinen Prototyp. Das ist interessant. Wir können hier sehen, der Prototyp ist keine Zeichenfolge. In der Tat ist sein Prototyp das HTML-Absatzelement. Und wenn wir diese App öffnen, können wir sehen, dass es eine ganze Menge anderer Eigenschaften und Methoden hat , die sich von denen unterscheiden, die wir in JavaScript erstellt haben. Ist das nicht interessant? Bevor wir weitermachen, wollte ich, dass du nur ein Gefühl dafür hast, warum all das wichtig wird. Wir müssen anfangen zu verstehen, wie die Dinge vom Ende kommen. Komische Art passt rein. Und man kann wirklich sagen, dass im Großen zwei verschiedene Arten von Objekten. Wir haben diese JavaScript-Objekte, die Sie in der nächsten Vorlesung sehen werden native Objekte genannt. Und wir haben auch dieses andere Objekt, nennen es ein Host-Objekt, das uns vom Host zur Verfügung gestellt wird, in diesem Fall vom Browser. Aber ich würde nur zu viel weggeben. Wir sehen uns in der nächsten Vorlesung. 3. Host und Native Objekte: Bevor wir weitergehen, um Hierarchien zu diskutieren und wie das alles funktioniert, müssen wir den Unterschied zwischen nativen und Host-Objekten verstehen. Und ich habe es kurz in der vorherigen Vorlesung erwähnt, aber ich möchte jetzt ein wenig mehr erweitern. In meinem JavaScript kompletten Großmaster-Kurs haben wir Prototypen im Detail behandelt, so bitte überprüfen Sie es, wenn Sie unsicher sind. Aber wenn ich Prototypen beiseite stelle, möchte ich nicht, dass Sie zwischen JavaScript-Objekten und DOM-Objekten verwechselt werden. Überraschenderweise gibt es nicht viele Informationen darüber auf der Welle. Das ist wirklich schwer zu kommen, aber kein Stress. Genau deshalb bin ich hier. Na gut, wo sollen wir anfangen? Wir wissen, dass jeder Knoten im DOM Methoden und Eigenschaften von seinem übergeordneten Knoten erbt. Und wenn Sie in JavaScript-Sprache sprechen möchten, könnten wir einfach sagen, dass jedes Objekt in JavaScript Methoden und Eigenschaften von seinem übergeordneten Objekt erbt. Es ist das Gleiche. Und wenn es um JavaScript geht, so ziemlich alles ist ein Objekt. Es ist nicht ganz wahr. Nicht alles in JavaScript ist ein Objekt, aber fast alles ist. Und es ist das gleiche im DOM. So ziemlich alles im DOM ist ein Knoten. Der Punkt, den ich versuche zu machen, ist, dass jedes Objekt oder jeder Knoten eine private Eigenschaft enthält, die einen Link zu seinem Prototyp enthält. Und wir sahen, wir konnten auf den Unterstrich zugreifen, Unterstrich proto, unter Verschwendungsschule, um seinen Prototyp zu sehen, jedes einzelne Objekt und Knoten hat diese Eigenschaft. Oder eine Flut. Was ist Ihr Sinn? Kurz gesagt, Punkt, den ich zu machen versuche, ist, dass ein Knoten ein generischer Begriff für jeden Objekttyp im DOM ist . Und wir wissen, wenn es um JavaScript geht und Objekt ist ein komplexer Datentyp. Es läuft also alles darauf hinaus. Wir können speichern, dass sie Objekttypen Land sind. Und schauen wir uns diese beiden Objekttypen an. Ich bin sicher, du hast es schon erraten. Wir haben einen nativen Objekttyp und wir haben einen Host-Objekttyp. Nun, schauen wir uns zuerst dieses native Objekt an. Hierbei handelt es sich um vordefinierte Kernobjekte, die immer in JavaScript verfügbar sind. Und sehr wichtig, dass diese Objekte in der ECMO-Skript-Spezifikation sitzen, Leute nennen es einfach die Rede. Denken Sie also daran, dass ein natives Objekt vollständig durch die Skriptspezifikation definiert ist und nicht durch die Host-Umgebung oder IDE Wasser. Einige Beispiele für native Objekte, sie umfassen Dinge wie Objekt, Funktion, String, Chaos, Boolean, ex cetera, et cetera. Sie sind viele von ihnen in JavaScript. Aber lassen Sie uns jetzt zu unserem Beispiel zurückkehren. Wir haben nur codiert, um es zu bekommen. Denken Sie daran, dass wir eine Variable namens Hund definiert haben und wir diese der Zeichenfolge WAF zuweisen. Und wenn wir den Typ des Operators von JavaScript verwenden und wir den Hund übergeben, was wird uns zurückgegeben? Nun, wir haben gesehen, dass es Prototyp ist, wenn wir existieren. Es war eine Schnur. Und ja, dieses Hundeobjekt ist ein natives Objekt. Sie könnten den Client argumentieren, das ECMO-Skript sprechen definiert nicht unsere Hundevariable und Sie haben Recht, aber dieser Hund ist immer noch ein aktives Objekt mit einer internen Klasse von String. Und diese Zeichenfolge wird durch die ECMO-Skriptspezifikation und ein Fliegenauge definiert. Einige Leute unterteilen Objekte in drei große Kategorien. Ein anderes ist ein Benutzerobjekt. Und sie sagen, dass dieser Hund ein Benutzerobjekt ist, aber ich sehe das Chaos Hand in Hand, ein Benutzerobjekt und ein natives Objekt von sehr, sehr nah. Und deshalb sage ich, dass dieses Hundeobjekt eine native 1.5 ist. Lassen Sie uns das loswerden und gehen wir zum zweiten Objekttyp über, und das sind Host-Objekte. Im Kern wird ein Host-Objekt von einer bestimmten Umgebung bereitgestellt, um ihrer Umgebung einen bestimmten Zweck zu erfüllen, der nicht durch die Spezifikation definiert ist. Und sehr wichtig, jetzt muss er uns bekommen, nicht alle Umgebungen haben die gleichen Host-Objekte. Wenn JavaScript beispielsweise außerhalb des Browsers ausgeführt wird, wenn es als serverseitige Skriptsprache in einer Umgebung wie Node.js ausgeführt wird, stehen verschiedene Host-Objekte zur Verfügung. Zum Beispiel Host-Objekte in Node.js oder HTTP, HTTPS wenn S, URL-Arrays, et cetera, et cetera. Aber wir wissen, wenn es um den Browser geht, sind unsere Host-Objekte sehr unterschiedlich. Wir haben das Fenster, wir haben die Dokumente, wir haben Geschichte, wir haben die XML-HTTP-Anfrage, et cetra, et cetra. Und was ist ein weiteres Beispiel für ein Host-Objekt? Codieren Sie hier ein kleines Beispiel. Nehmen wir an, wir definieren eine Variable P und wir verwenden eine der Achsenmethoden im DOM, um dieses Element abzurufen. Hier haben wir eine Methode namens getElementsByTagName verwendet. Und in Teil eins der Serie wissen Sie sehr gut, dass dies eine DOM-API-Methode ist, und es gibt uns eine Knotenliste zurück. Der Punkt, den ich versuche zu machen, ist, dass dieses Absatzelement wie ein normales JavaScript-Objekt anfühlt. Aber es ist nicht voll gespendet. Sie Objekt, auf das durch unsere p-Variable verwiesen wird, ist eine Knotenliste. Und eine Knotenliste ist in der Skriptspezifikation nicht definiert. Wir wissen also, dass das, was uns von diesem getElementsByTagName zurückgegeben wird, ein Host-Objekt ist. Hat das irgendwie Szenen machen, die Hubs oder eine Hand erholt sich eine Menge. Aber lassen Sie uns weitermachen. Lasst uns das loswerden, all das Geräusch loswerden. Und jetzt möchte ich, dass wir über das Fensterobjekt sprechen. Das Window-Objekt wird uns vom Browser, vom Host zur Verfügung gestellt. Und was wirklich cool an diesem Fensterobjekt ist, dass es uns Zugriff auf Dinge wie das DOM, die Bombe gibt, und es erlaubt JavaScript darin zu laufen. Wichtig ist, dass alle Webbrowser das Window-Objekt unterstützen. Und dieses Fensterobjekt ist unser Wurzelobjekt. Es wird uns vom Browser gegeben. Okay, was sind also einige der Host-Objekte innerhalb des DOM? Wir haben einige von ihnen bereits in diesem Kurs gesehen. Die häufigste, die Sie gesehen haben, ist dieses Dokumentobjekt. Dieses Objekt bezieht sich auf den HTML- oder XML-Inhalt, der im Browserfenster angezeigt wird. Aber wir haben viele andere Objekte, die uns vom DOM zur Verfügung gestellt werden, wie das Ereignisobjekt, die Konsole, das Knotenobjekt, sogar das HTML-Absatzelementobjekt , das wir im vorherigen Beispiel gesehen haben, cetera, et cetera. Es gibt eine Menge Spaß. Wir haben auch Bomber, Browser, Objekt, Modellobjekte, nicht wahr? Dinge wie Screen History Frames, der Navigator, et cetera, et cetera. Und schließlich haben wir native JavaScript-Objekte. All diese grünen Objekte, oder was wir als native JavaScript-Objekte bezeichnet, Dinge wie das Objekt und die Zahl, Datum, Zeichenfolge, Situ, et cetera. Okay, bevor wir fertig sind, fragen Sie sich vielleicht nur Clyde, was ist der Unterschied zwischen der DOM-Stückliste? Erstens möchte ich sagen, dass wir argumentieren können, dass der Host, auch bekannt als unser Browser, uns Zugriff auf alle DOM und die Bombenobjekte direkt aus der Box gewährt hat . Und aus diesem Grund werden diese Objekte als Host-Objekte bezeichnet. Was ist der wirkliche Unterschied zwischen dem DOM und der Bombe? Wird in Teil 1 dieses Kurses, Sie haben gelernt, dass das DOM ein Standardsitz ist und vom World Wide Web Consortium oder W3C für kurz gepflegt wird. Und sie definieren, wie wir Browser ein HTML- oder XML-Dokument interpretieren sollen. Sie könnten also sagen, dass das DOM von einem bestimmten Körper regiert wird. Was ist mit der Bombe, dem Browser-Objektmodell? Die Stückliste definiert, wie Browser die Ansicht in einigen anderen Eigenschaften eines Dokuments im Gegensatz zu seinem Inhalt behandeln , was in erster Linie das DOM abdeckt. Zai Maxine. Ein sehr wichtiger Punkt, den Sie hier machen müssen, ist, dass die Bombe im Gegensatz zum DOM kein Standard ist, der von einer Organisation festgelegt wird. Es ist also eher wie ein Ansatz, den wir als Programmierer verwenden. Es ermöglicht uns, die Vorteile der Tatsache zu nehmen, dass alle Webbrowser bestimmte Objekte und verwandte Methoden unterstützen. Aber wie auch immer, ich wollte das nur beiseite legen, damit Sie verstehen, wie ich DOM und Bombe in Host-Objekte gruppiere und warum ich JavaScript in einer separaten Kategorie gruppiere , die alleine als native Objekte bezeichnet wird. Und wir wissen, dass JavaScript offensichtlich von einer Organisation regiert wird , dass AIG Skript-Spezifikation spezifisch sein muss. Und alle seine Objekte werden von dieser Organisation oder von dieser Spezifikation definiert. Und deshalb können wir nativ gegen Host trennen. Ich hoffe, dieser Vortrag hat Szenen ein glückliches Gefühl gemacht, viel angenehmer mit der Seele. Aber keine Sorge, wir werden in den kommenden Vorträgen näher eingehen. Und jetzt will ich, dass wir nach Aki springen. Ich möchte, dass wir uns auf diese Host-Objekte konzentrieren, denn wieder, das ist, worum es in diesem Kurs geht. Wir sind über das DOM, wie man das DOM manipuliert, wie man Ihre Seiten dynamischer macht. Und natürlich, um das zu tun, müssen wir mit Knoten arbeiten. Und Knoten, wie wir gerade erwähnt haben, sind die DOM-Objekte und dies sind Host-Objekte. Und deshalb möchte ich mich auf Host-Objekte konzentrieren, coole Häfen, Heilige machen. Und wir sehen uns in der nächsten Vorlesung. 4. Vererbung: Es ist an der Zeit, sich die Hierarchie der Knoten anzusehen. Das Verständnis der Knotenhierarchie ermöglicht es uns zu verstehen, wie Knoten alle Methoden und Eigenschaften erhalten. Moment wissen wir, dass das DOM eine ganze Reihe von Objekten Schrägknoten hat , die uns direkt aus der Box gegeben werden. Und wir wissen auch, dass diese Knoten-Objekte, aka Host-Objekte, oder anders als JavaScript oder native Objekte. In Zukunft möchte ich mich jetzt nur auf die Host-Knoten-Objekte konzentrieren. Obwohl viele dieser Konzepte, über die wir sprechen werden, gleichermaßen für native JavaScript-Objekte gelten. Okay, also was ist der Ausgangspunkt? Was müssen wir lernen? Nun, der vollständige Satz von Eigenschaften und Methoden eines Knotens kommt als Ergebnis von etwas bekannt als Vererbung. Erbschaft, die Weitergabe von betitelten zu einem Nachlass nach dem Tod. Ich rede nicht von rechtlichem Erbe. Ich spreche von DOM-Vererbung. Es bedeutet nur, dass einige Knotenobjekte standardmäßig Werte erben, aka Eigenschaften und Methoden, die auf ihrem übergeordneten Objekt Status sind. Hat wirtschaftliche Szenen. Es ist alles Vererbung bedeutet. Aber um die Vererbung ein wenig mehr zu verstehen, Lassen Sie uns so aussehen, wie einfache Methode kommt aus. Also im Moment möchte ich nicht auf ein Knotenobjekt schauen. Ich hasse es, dass du einfach noch einfacher sein willst. Ich möchte eine einfache Methode betrachten. Wir wissen, dass, um Modifikatorbewegungen oder überschüssige Elemente zu erstellen, müssen wir immer an der Wurzel beginnen. Wir müssen auf das Dokumentobjekt zugreifen. Zum Beispiel, um ein Absatzelement zu erstellen, müssen wir Dokument Punkt erstellen Elemente eingeben, und wir übergeben in der Grenze, die wir erstellen möchten. Hier wollen wir einen Absatz erstellen. Die Frage, die ich für Sie habe, ist, wie diese Methode erstellt, beseitigt zugegeben, kommt von Ihnen vielleicht denken, dass es aus dem Dokumentobjekt kommt, oder? Weil wir auf die Dokumente zugreifen und wir existieren eine Methode auf sie als Element erstellen. Nun, die Antwort könnte Sie überraschen. Lass uns zur Konsole springen und versuchen und finden. Dadurch werden Elemente zusammen erstellt. 5. Finden, wo die Methode von der createElement() zu Finding: Alles klar, Lassen Sie uns diese Methode erstellen Element finden. Könnten wir es sein? Nun, zuerst, lasst uns auf unsere Konsole zugreifen. Und wir gehen und machen dies einfach zu einer Full-Size-Seite. Und lasst uns versuchen, es zu finden. Es bedeutet Rumänien, so dass Sie ein bisschen besser sehen können. Nun, zunächst lassen Sie mich mit der offensichtlichsten Lösung beginnen. Wenn wir nur versuchen, auf unser Fensterobjekt zuzugreifen und dieses Fensterobjekt öffnen, können Sie wirklich sehen, ob wir alphabetisch sortieren, gibt es keine Create-Element-Methode. Wir wissen also, dass es nicht auf dem Fensterobjekt steht. Und das macht irgendwie Sinn. Wir wissen bereits, wenn wir diese Methode erstellen Element zugreifen. Wir begannen mit dem Dokumentobjekt. Schauen wir uns nun das Dokumentobjekt an. Ich möchte nur HDR, das Fensterdokument, trösten. Dies sind also Dokumentobjekt, das im JSON-Format dargestellt wird. Nur wenn wir nicht auf das Fenster zugreifen mussten, um auf das Dokument zuzugreifen. Standardmäßig sind alle globalen Objekte oder Methoden verfügbar, ohne das Schlüsselwortfenster zu verwenden. Also hätten wir das Dokument einfach trösten können. Das ist nur ein bisschen, als ob wir es sind, wenn wir dieses Dokument öffnen und wir versuchen, nach der Create-Element-Methode zu suchen. Hier werden Sie feststellen, dass wir es nicht finden können. Können wir wissen, dass es gesehen werden soll? Eine schnelle Sache, die wir tun können, ist, dass wir Control a gehen und wir können einfach versuchen, es unten zu finden, aber das Erstellen Element eingeben, und es ist nirgends zu finden. Sie können es nicht finden. Das ist also ziemlich interessant. Also, jetzt ist es nicht auf dem Fensterobjekt, das ist nicht auf dem Dokumentobjekt. Nun, wo ist es? Wir werden anfangen müssen, die Vererbung zu betrachten. Und um das zu tun, können wir uns den Prototyp der Dokumente ansehen, aka wir können uns ansehen, wie es der unmittelbarste Elternteil ist. Wenn Sie also unser Dokumentobjekt öffnen und wir nach unten scrollen, werden Sie sehen, dass wir It's Prototyp haben, um dieses HTML-Dokument zu sein. Und wenn wir diesen Prototyp, das HTML-Dokumentobjekt, wieder öffnen , können wir sehen, dass die Create-Methode nicht hier ist. Also lassen Sie uns zu seinem Prototyp scrollen, dass HTML Prototyp bestimmen. Und hier bekommen wir ein anderes Dokument genannt, aber dieses Mal ein Kapital D. Wir haben dies im Detail in Teil 1 dieses Kurses durchgemacht. Aber wie auch immer, öffnen wir das Objekt. Und die gute Nachricht ist, wenn wir hier nach unten scrollen, und hier sind es Meine lieben Studenten, die Elementmethode erstellen. Mein Punkt zur Vererbung ist also, wenn der Parser auf unsere create-Element-Methode auf dem Dokumentobjekt stößt, das kleine d, das ich hinzufügen kann, es ist nicht da. Der Parser muss sich dann die Prototypenkette hinaufarbeiten. Und schließlich wird es diese Create-Element-Methode auf dem Großeltern des Dokumentobjekts finden , dieses große D-Dokumentobjekt, und so funktioniert die Vererbung. Das Dokumentobjekt erbt die Create-Element-Methode vom großen D-Dokumentobjekt. Wer, wer ist das nicht? Awesome? Ich hoffe, du hast Spaß. Ich hoffe, Sie lernen viel in dieser Kursreihe. Die Summe dieser Dinge ist sehr weit fortgeschritten. Schlecht, wir fangen gerade erst an. Und wir begannen mit einem sehr einfachen Beispiel. Wir haben uns das Dokumentobjekt innerhalb des DOM angesehen, und wir folgten dem ganzen Weg nach oben, um zu finden, woher eine seiner Methoden kommt, Henry fand heraus, dass es auf seinem Großeltern war. Ich kann das Ihnen beweisen, aber wenn wir Dokument gehen, können wir uns seinen Proto-Typ ansehen , der HTML ist. Erinnerst du dich an das Dokument Und wir können uns seinen Prototyp ansehen. Und das sollte das große D sein, das Dokument. Und wir wissen in diesem großen D in diesem Dokumentobjekt, das war, wo die Methode herkam. Dies war also ein sehr spezifisches Beispiel, ein sehr einfaches. Aber ich möchte jetzt vom Dokumentobjekt im DOM wegtreten. Und ich möchte ein bestimmtes Knotenobjekt innerhalb des DOM betrachten. Und ich möchte dieser Knotenobjekthierarchie in der Prototypkette folgen , damit wir das DOM besser verstehen können. Es wird sehr, sehr interessant sein. Also sehe ich Sie in der nächsten Vorlesung und lasst uns jetzt anfangen, Knotenhierarchien zu betrachten. 6. Element: Okay, ich sage dir immer wieder und schau dir die Knotenhierarchie an und wir verzögern sie nicht mehr. Lass uns jetzt hineinspringen. Beginnen wir mit dem Erstellen eines sehr einfachen Absatzelements mit einem Bauch. Wir wissen, dass dies ein DOM-Objekt sein wird. Warte, warte, warte, warte, warte. Woher wissen wir, dass es ein DOM-Objekt ist? Lassen Sie mich es Ihnen zeigen. Alles klar, woher wissen wir, dass unser Absatzelement ein DOM-Objekt ist wird zuerst, was ich tun möchte, eine Variable namens Absatz definieren und es ist eine erstellen. So Dokument Elemente erstellen. Und wir wollen ein Absatzelement erstellen, nicht wahr? Alles, was wir tun müssen, um seinen Objekttyp als welches Modell zu bestimmen. Der einfachste Weg, den ich mir vorstellen kann, ist, dass wir es auf dem Bildschirm alarmieren können. Und wir können hier sehen, dass das zurückgegebene Element ein Objekt ist. Und welche Art von Objekt ist das? Es ist ein HTML Absatzelement, Objekt. Und Hals, meine lieben Studenten ist ein DOM-Objekt. Woher wissen wir, dass es DOM-Objekt ist? Will wissen, dass es irgendwie seltsam klingt, aber wir wissen, dass es DOM-Objekt ist, weil es kein JavaScript-Objekt ist. Zum Beispiel, wenn wir eine neue Variable namens Objekt definieren, und wir verwenden nur die geschweiften Klammern, gibt es viele verschiedene Möglichkeiten, um ein Objekt in JavaScript zu erstellen. Übrigens, das ist nur einer von ihnen. Es ist sehr schnell, es zu tun. Es ist eigentlich sehr ähnlich, wenn nicht das gleiche wie das Aufrufen eines neuen Objekts. Und wir werfen nur null als Prototyp. Das ist alles, was es tut. Geschweifte Klammern tun. Also gehen wir hin. Wir haben ein Objekt. Und wenn wir dieses Objekt alarmieren, was werden wir dann sehen? Nun, da gehen wir. Wir wissen, dass es ein Objekt ist und wir wissen, dass es vom Typ Objekt mit einem großen O ist. Und das große O Objekt ist ein JavaScript-Objekt wen? Also haben wir gerade gezeigt, dass dieser Absatz, den wir gerade erstellt haben, ein DOM-Objekt ist. Ok, cool. Also haben wir unseren Absatz, wir wissen, dass es ein DOM-Objekt ist. Beginnen wir uns mit der hierarchischen Struktur nach oben zu arbeiten. Sein Prototyp wird in diesem Fall das HTML-Absatzelement sein . Whoa, whoa, whoa, whoa, whoa. Woher wissen wir, dass sein Prototyp das HTML-Absatzelement ist? Wieder, lassen Sie mich einfach schnell auf die Konsole springen und es Ihnen zeigen. Okay, woher wissen wir, dass der Prototyp dieses Absatzes, den wir erstellt haben , das HTML-Absatzelement ist. Alles, was wir tun müssen, ist auf unser Paragraph-Objekt zuzugreifen. Und natürlich müssen wir auf seinen Prototyp zugreifen. Und da gehen wir. Es ist Prototyp dieses HTML-Absatzelement. Toll, hoffe, es ergibt Sinn. Nun hat das HTML-Absatzelement auch einen Prototyp, und sein Prototyp ist das HTML-Elementobjekt. Ich bin mir sicher, dass Sie das jetzt erledigen, aber woher wissen wir, dass das HTML-Absatzelement einen Prototyp von HTML-Elementen hat? Während die beiden Möglichkeiten, wie wir das herausfinden können, die erste und einfachste Möglichkeit, dieses HTML Absatz Element Objekt zu öffnen. Und natürlich können wir ganz nach unten gehen und wir können uns sein Proton ansehen. Und dieses Proton ist das HTML-Element. Der zweite Weg, wie wir es tun können, wenn Sie es nicht öffnen wollten da wir auf unsere Prototyp-Quoten zugreifen konnten, das Paragraph-Objekt, das wir erstellt haben. Und dann können wir uns seine Prototypeneigenschaft ansehen. Und natürlich bekommen wir das HTML-Element. Ich hoffe, das ergibt Sinn. Springen wir zurück zur Vorlesung. Ich denke, du bekommst jetzt den Punkt, wie er die Prototypen findet. Also werde ich Ihnen nicht weiter zeigen, mit den Prototypen kommen. Sie können mein Wort dafür nehmen, aber ich ermutige Sie, sich selbst zu überprüfen. Es ist eine lohnende Übung. Also lassen Sie uns diese Übung fortsetzen. Das HTML-Element hat auch einen Prototyp. Es ist Prototyp wird das Element Objekt sein. Sein Prototyp wird das Knotenobjekt sein. Der Prototyp wird das Ereignisziel sein. Und jetzt ist das interessant. Halten Sie an, um zu ändern. Der ultimative Prototyp ist der Objektprototyp. Und was faszinierend ist, ist, dass dieser Objektprototyp von JavaScript stammt. Es ist der JavaScript-Objektprototyp. Und wenn y, falls Sie sich fragen, ist der Prototyp des Objekts selbst null. Es bedeutet also, dass dieses Objekt, und was super interessant ist, was Sie in den Sinn bringen wird, ist, dass dies bedeutet, wenn Sie nur diese Struktur auf hoher Ebene betrachten, es bedeutet, dass unser DOM-Objekt in diesem Fall auch ein JavaScript-Objekt. Ich weiß, es kann wirklich verwirrend werden und es kann so erscheinen. Und deshalb sind die beiden so eng miteinander verflochten, sie so eng miteinander verwandt sind. Denken Sie also daran, im Kontext des Browsers, DOM-Objekte sind aufgrund dieser hierarchischen Struktur auch JavaScript-Objekte. Und natürlich ist das Gegenseitige nicht wahr. Javascript-Objekte sind nicht automatisch DOM-Objekte. Okay, aber warum haben wir all diese verschiedenen Arten von Objekten? Was ist los? Ja, nun, fangen wir ganz oben an. Lids, die an diesem Ereignis Zielobjekt gelehrt werden, wird zunächst dieses Ereignisziel das Wurzelobjekt und es dient als. Basis für alle Knoten. Mit anderen Worten, das Täuschen von Ziel ermöglicht es allen Knoten in unserem DOM, Ereignisse zu verwenden. Als Beispiel gibt es uns Zugriff auf die addEventListener Methode. Wenn wir mit diesen Methoden beginnen, sind keine Elemente. Hier kommt es her. Ist das nicht interessant? Denken Sie also daran, dass das Ereignisziel eine DOM-Schnittstelle ist und von allen Knotenobjekten implementiert wird. Sie können Ereignisse empfangen und sie können Zuhörer für sie haben. Wir wissen, dass wir Ereignis-Listener auf Elemente, das Dokument, sogar das Fensterobjekt, die gängigsten sogar Ziele setzen können sogar das Fensterobjekt, , aber es hört nicht an diesen einfachen Beispielen auf. Andere Objekte können auch Ereignisziele sein, zum Beispiel das XML-HTTP-Anforderungsobjekt, das Audio-Knotenobjekt und das Audio-Kontextobjekt und eine ganze Fülle anderer. Und es ist eine FYI, weil wir wissen, dass alle diese Knoten letztendlich von diesem Objekt erben. Denken Sie daran, aus dem JavaScript-Objekt, wir haben verschiedene andere Methoden zur Verfügung. Plane Objekt Methoden wie hat eigene Eigenschaft. hätte ich zum Beispiel früher erwähnen sollen. Ich dachte nur, ich schmeiße es jetzt rein, weil ich gerade daran gedacht habe. Wie auch immer, lassen Sie uns weitermachen. Das ist das Ereignisziel. Fangen wir an, unseren Weg nach unten zu arbeiten. Wir haben auch dieses Knotenobjekt, oder? Dieser Knoten Objekt ermöglicht es uns, das DOM zu durchqueren. Mit anderen Worten, es gibt uns Methoden wie Elternknoten, untergeordnete Knoten, nächste Geschwister, et cetera, et cetera. Diese Methoden werden nur Heizungen genannt, weil wir tatsächlich versuchen, etwas abzurufen , mit dem viele der Knoten, mit denen Sie und ich arbeiten werden, erben von diesem Knoten, einschließlich unseres Absatzes Element, das wir gerade erstellt haben. Das hat ich immer erwähnt, dass es viele andere konkrete Knotenklassen gibt , die davon erben. Nämlich, das braucht Knoten 4, nimmt Knoten für 11 Knoten und exotischere wie die Comic-Knoten eliminiert. Aber wovon rede ich? Das weißt du schon. Lasst uns weiter nach unten arbeiten. Was ist das für ein Element? Dieses Element ist die Basisklasse für alle DOM-Elemente. Und wie der Name schon sagt, hilft uns dieses Objekt, nur Elementelemente zu durchqueren. So gibt es zum Beispiel Zugriff auf Methoden wie gemischte Elemente der Verknüpfung, die Children-Methode, die, wie Sie wissen, nur für Elemente und die Abfrage Selektor verwendet werden kann, et cetera, et cetera. Ich gebe Ihnen diese Handvoll Beispiele, weil ich weiß, dass wir zuvor mit ihm gearbeitet haben, aber wie ich immer anspiele, hört es nicht nur mit diesen Methoden auf und erwähnen zum Beispiel diese Elementklausel, die als Basis dient spezifischere Klauseln wie das SVG-Element, XML-Elemente. Und natürlich dient es auch als Basis für die HTML-Elemente. Also lassen Sie uns jetzt über dieses HTML-Element sprechen. Eher intuitiv ist diese Schnittstelle für alle HTML-Elemente auf unserer Seite verfügbar. Und es gibt Operationen in Abfragen, die für jedes HTML-Element gemacht werden können. Und dieses HTML-Element wird von einem spezifischeren, konkreten HTML-Element geerbt. In unserem Fall, weil wir einen Absatz erstellt haben, wurde er vom HTML-Absatzelement geerbt. Und erinnere dich an jedes Tag, einen Absatz oder ein div, ein Bild, ein Anker-Tag. Jeder hat sein eigenes einzigartiges Objekt, von dem er erbt. Beispielsweise erbt das Anker-Tag nicht vom HTML-Absatzelement. Es wird vom HTML-Ankerelement erben. Und jede Objektklasse wie diese bietet spezifische Eigenschaften und Methoden für jedes Element, an dem Sie arbeiten. Zum Beispiel ein Elementknoten, der einem Tag entspricht. Und ein Tag hat verknüpfungsbezogene Eigenschaften, und eines, das einem Eingabetag entspricht hat eingabebezogene Eigenschaften und so weiter und so weiter. Wer, die jetzt unglaublich weit weg gekommen sind. Und ich hoffe, Sie haben Spaß und nehmen all diese Informationen auf. Und es hat sehr lange gedauert, es zu lernen und zu versuchen, es auf eine sehr einfache und intuitive, lustige Art und Weise zusammenzustellen. Und denken Sie daran, dass jedes Objekt im DOM eine hierarchische Struktur hat, die dieser ähnelt. Es wird nicht genau dasselbe sein, hängt davon ab, womit wir arbeiten. Viele von ihnen werden von den gleichen Dingen erben. Zum Beispiel wissen wir, dass wir auch Knoten haben. Wir haben nicht nur Elementknoten, mit denen wir uns noch beschäftigt haben. Dewey und nimmt Notizen sind nicht das gleiche wie Elementknoten, aber sie sind auch gemeinsame Eigenschaften und Methoden zwischen allen von ihnen. Da alle Klassen von Dominosteinen oder aus einer einzigen Hierarchie, letztendlich, wird dieses Ereignisziel, zum Beispiel, gleichermaßen gelten, um Schnee und gemeinsame Knoten zu nehmen, wie es tut, um zu eliminieren. Der Punkt, den ich ansprechen möchte, ist, dass es darum geht, worum es in der Hierarchie geht. Und wenn Sie sich jemals in einem Loch befinden, werden Sie jetzt wissen, wie Sie sich ausgraben können, weil Sie wissen, wie Sie diese Methode finden. Sie wissen, wenn Sie erwarten, dass eine bestimmte Methode auf einem bestimmten Knotentyp ist, können Sie sie auf finden. Ich hoffe, dass Sie jetzt wissen, warum. Aber wie auch immer, wir haben noch einige Dinge, die ich in diesem Abschnitt kommen möchte , bevor wir auf Szene nach oben gehen. 7. Erbe – Zusammenfassung: Oder seltsam, wir haben einen langen Weg zurückgelegt. Ich möchte nur einen Schritt zurück machen und nur zusammenfassen, was wir gelernt haben, wenn es um die Knotenhierarchie geht. Wir haben auf den vollständigen Satz von Eigenschaften und Methoden eines bestimmten Knotens gesehen kommt von der Vererbung. Und speziell haben wir uns das Absatzelement angesehen, das wir erstellt haben, aus dem seine Eigenschaften und Methoden abgerufen werden. Das ist richtig, das HTML-Absatzelement, das seine Eigenschaften und Methoden aus dem HTML-Element abruft. Es erhält seine Eigenschaften und machte es aus einem Element. Es ruft seine Eigenschaften und Methoden vom Knoten und ruft seine Eigenschaften und Methoden vom Ereignisziel ab. Das war ein bisschen ein Bissen voll. Und wir haben auch gelernt, dass jeder spezifische Typ von prototypischem Objekt das für einen Zweck ist. Das HTML-Absatzelement stellt beispielsweise absatzspezifische Eigenschaften bereit. Das HTML-Element stellt gängige HTML-Elementmethoden wie Getter und Setter bereit. Wir wissen, dass Elementobjekt allgemeine Elementmethode bietet. Denken Sie daran, dass wir uns einige davon angesehen haben. Der Knoten stellt allgemeine DOM-Knoteneigenschaften und das Ereignisziel ist vielleicht das wichtigste. Dies ist die Wurzel der meisten Methoden, mit denen wir arbeiten werden. Und dies gibt Unterstützung für Ereignisse wie den Add-Ereignis-Listener. Da gehen wir. Ich wollte nur einen Schritt zurück machen. So können Sie irgendwie auf einem sehr hohen Niveau sehen, was wir gerade abgedeckt haben. Aber bevor wir diesen Abschnitt beenden, möchte ich, dass wir etwas anderes besprechen. Ich möchte, dass wir uns ansehen, wie dumme Aussterben funktionieren. Dies ist kein sehr bekanntes Thema, aber es ist sehr, sehr interessant. Also lasst uns in der nächsten Vorlesung darauf eingehen. 8. DOM – Intro: Wir sind in diesem Abschnitt einen langen Weg gekommen, aber ich möchte nur schnell die Praxis des DOM-Aussterbens erwähnen. Erstens, was ist das? Dumme Auslöschung ist nur der Prozess, benutzerdefinierte Methoden und Eigenschaften zu DOM-Objekten hinzuzufügen . Rest, DOM-Objekte werden beobachtet. Und Introns sind keine Objekte oder Host-Objekte. Insbesondere DOM-Objekte oder Hearst-Objekte, die vom Elementereignisdokument oder einer anderen DOM-Schnittstelle erben. Wir haben diese Bekanntmachung durchgemacht. Und das ganze Konzept des Aussterbens, DOM-Aussterben. Nun, um diese Eigenschaften und Methoden zu diesen Host-Objekten hinzuzufügen. Und Sie können diese Objekte entweder direkt oder zu den Prototypen hinzufügen. Für Tage werden wir in Kürze sehen, Sie können dies nur in Umgebungen tun , die die beliebtesten erweiterten Objekte oder DOM-Elemente, wie den Absatz oder die div-Tags, IE, Elemente, die von der -Element-Schnittstelle aus dem DOM. Dies sind die beliebtesten Dinge, auf die viele Entwickler Aussterben hinzufügen wollen , weil es das ist, was wir am meisten arbeiten. Und weil es so beliebt ist, gibt es viele Bibliotheken und Pakete von Drittanbietern erweitert wurden und ermöglichen, dass diese Dinge geschehen, wie Prototypen oder Moo-Tools. Aber lassen Sie mich diesen Vortrag nicht aus den Augen verlieren. Lassen Sie uns das loswerden und schauen wir uns jetzt ein Absatzelement an. Erinnern Sie sich, dass wir die Hierarchie dieses Knotenelements hinauf gegangen sind. Wie sieht das aus? Nun, das ist Stangen sind Absatz beginnt als Objekt, nicht ein Elementobjekt spezifisch zu sein. Und als wir uns seinen Prototyp anschauten, war es dieses HTML-Absatzelement. Und offensichtlich wird dieses Objekt spezifisch für die Art des Elements für unseren Absatz sein . Ja, wir können sehen, dass es das HTML-Absatzelement ist. Für ein div-Element wird es nicht sein, dass es das HTML-div-Element sein wird. Für das Ankerelement wird das HTML-Element sein und so weiter und so weiter. Übrigens, warum sind diese wichtigsten, sitzen so? Warum sind sie so seltsam? Nun, du und ich sitzen nicht auf diese Namen. Sie werden durch die DOM HTML-Spezifikation definiert und et cetera, gleiche Spezifikation, definiert das gleiche Spezifikationsnetz auch Vererbung zwischen verschiedenen Schnittstellen. So wie auch immer, das ist nur ein bisschen Information. Die HTML-Absatzelemente, Was ist sein Prototyp? Es ist das HTML-Element. Sein Prototyp ist das Element, sein Prototyp ist der Knoten. Wir kommen dann zum sehr wichtigen Ereignisziel. Und wie wir in der vorherigen Vorlesung gesehen haben, ist das ultimative Objekt das Objekt. Und natürlich ist sein Prototyp null. Aus diesem Grund mit mehr Details. Okay, Clyde, das ist großartig. Ich weiß das alles, aber warum schauen wir uns das noch mal an? Nun, ich möchte ein DOM mit dir austauschen. Ich möchte tatsächlich zu den Takes Daten zu bekannten springen. Ich möchte, dass wir anfangen, etwas zu programmieren. Fügen wir also einem dieser Knoten, diesen Objekten, ein Aussterben hinzu, das bei unserer eigenen benutzerdefinierten Methode liegt . Und lass mich einfach meinen Daumen saugen und einen zufälligen auswählen, der nur dieses Element anschaut. Und lassen Sie uns unsere eigene benutzerdefinierte Methode auf diesem Element Host-Objekt hinzufügen. Lass uns das jetzt machen. Das wäre wirklich lustig. 9. Gebracht unsere eigene Adding: Alles klar, wie funktioniert diese DOM-Auslöschung? Und schauen wir uns ein Beispiel an. Was wollen wir tun? Nun, sagen wir einfach, wir wollen eine Funktion namens lesen erstellen, die wir für jedes Element verwenden können, das wir erstellen. Und es ändert nur, dass Elemente Farbe. Um zu lesen. Sehr einfache Schreibvorgänge, sehr intuitiv. Also hier sind wir nur in der Browser-Konsole. Ich benutze keine ausgefallene IDE. Wir sind nur in Chrome-Konsole. Ich werde das erweitern, nur damit wir es im Vollbild sehen können. Und lassen Sie mich etwas hineinzoomen. Alles klar, was ich tun werde, ist, dass wir auf das Elementobjekt zugreifen, richtig? Und denken Sie daran, dies wird uns vom DOM zur Verfügung gestellt. Dies ist ein Host-Objekt. Und jetzt möchte ich auf seinen Prototyp zugreifen und eine Funktion namens Lesen definieren. Was ich tun will, das ist eine benutzerdefinierte Funktion und wir machen, hängen an Clyde. Warum müssen wir auf den Prototyp zugreifen? Warum greifen wir nicht einfach auf das Objekt zu und importieren eine benutzerdefinierte Methode namens rid darauf? Nun, erstens, um mehr über Prototypen und die Prototypenkette zu erfahren, schauen Sie sich bitte meinen JavaScript-Grandmaster-Kurs an. Die kurze Antwort ist, dass, wenn wir es direkt auf das Elementobjekt so setzen, es nicht an seine Konstruktorfunktion angehängt wird. Mit anderen Worten, es wird spezifisch für diese Instanz des Elements sein. Aber auf anderen Objekten erstellen wir mit der Elementkonstruktorfunktion, die nicht da sein wird. Und das ist der Grund, warum ich es an seinen Prototyp befestigen will. Denken Sie daran, dass der Prototyp uns über JavaScript zur Verfügung steht. Und es bedeutet nur, dass andere Objekte, die daraus erstellt werden , auch seine Prototypeigenschaften zeigen. Sagen Sie, dass irgendwie Sinn ergibt. Ich hoffe es. Also, hier geht's, wir greifen als Prototyp zu. Dort definieren wir eine Funktion namens lesen und wir werden das zuweisen. Wie ich schon sagte, es wird eine Funktion sein. Verwenden Sie also JavaScript-Funktionsschlüsselwort. Und in dieser Funktion, was wollen wir passieren? Wollen wir auf das Objekt zugreifen, das diese Methode aufgerufen hat? Also verwenden wir das, dieses Schlüsselwort. Auch wenn Sie nicht verstehen, was das ist, schauen Sie sich bitte unseren JavaScript-Grandmaster-Kurs an. Also, jetzt haben wir das Objekt, das diese Methode aufgerufen hat, um auf seine Stileigenschaft zuzugreifen und wir wollen seine Farbe ändern. Erinnerst du dich daran? Und wir wollen die Farbe in Rot ändern. Also gehen wir hin. Das ist unser roter Prototyp. Okay, wir haben jetzt an dieses Elementobjekt angehängt. Dann möchte ich als nächstes einen Absatz erstellen. Also wissen wir, wie man das schon macht. Lassen Sie uns eine Variable namens p erstellen. Es begann die Wurzel unserer Seite, und lassen Sie uns eine Methode namens create elements zugreifen. Und das Element, das wir hier erstellen wollen, ist P. Was ich jetzt tun will, habe ich ihm kein Gleichheitszeichen zugeteilt. Da gehen wir. Also, jetzt haben wir unseren Absatz erstellt. Was ich jetzt tun will, ist, dass ich mich tatsächlich wieder an die Seite heften zu lassen. Um dies in Aktion zu sehen, möchte ich unseren Absatz auf dieses Dokument setzen. Wie können wir das tun? Nun, zuerst, lassen Sie uns auf unser Dokument zugreifen und ersetzen Sie einfach alles , was Sie auf dem Bildschirm sehen, durch das Wort hi. Also gehen wir hin. Wir haben das Wort „Hallo“. Nun, was ich tun möchte, ist, dass ich einem Absatz Inhalt hinzufügen möchte. Im Moment wird es nur ein leeres Etikett sein. Also möchte ich auf unser p.sit-Objekt zugreifen und frage mich, dann fügen Sie einige Textinhalte ein. Und sagen wir einfach, dies ist ein neues Absatzelement. Ziemlich einfach. So weit, so gut. Und wie Sie sich aus der ersten Reihe dieses Kurses erinnern, haben wir diesen Absatz erstellt, aber wir haben nichts angehängt. Es schwebt nur im Weltraum an dieser Stelle herum. Was ich jetzt tun möchte, ist, dass ich das dem DOM hinzufügen möchte. Also alles, was wir hier tun, ist, dass wir auf unseren Dokumentenkörper zugreifen und wir verwenden eine Pin, die das Kind an den Körper anheftet. Und ich möchte diesen Absatz festschreiben. Cu Wir sind fast fertig, ich verspreche es. Das Letzte, was wir tun wollen, ist, dass wir auf diese rote Funktion zugreifen wollen. Und Sie werden auf diesem P-Objekt bemerken, wir haben noch nie eine Lesefunktion definiert. Glaubst du, es wird funktionieren? Wir greifen auf unser P zu und wir versuchen, diese Funktion namens lesen auszuführen. Denkst du es weg? Wasser? Lasst uns jetzt die Rückkehr drücken. Und sieh mal, wie genial. Und das meine lieben Studenten ist DOM Aussterben. Wir haben unsere eigene benutzerdefinierte Methode zu diesem Elementobjekt hinzugefügt. Mann, also denkst du vielleicht an diesem Punkt, das ist fantastisch und ich werde das die ganze Zeit machen. Aber aus Gründen, die ich jetzt besprechen werde, ist das keine gute Praxis, kann aus Gründen, die ich diskutieren werde, sehr chaotisch werden. also ohne weiteres Lassen Sie unsalso ohne weiteresin die nächste Vorlesung springen und uns diesen Code etwas genauer ansehen. 10. Sind die DOM gut oder schlecht?: Wir haben gerade ein Beispiel für DOM-Aussterben zusammen gemacht, ip, Spaß haben. Ich hoffe, Sie lernen eine Zeit, aber ich möchte nur etwas ausführlicher über unseren Code sprechen. Also lassen Sie es mich wieder auf den Bildschirm bringen. Das haben wir gerade getan. Denken Sie daran. Zuerst haben wir die Lesefunktion dem Elementprototyp zugewiesen. Wir haben dann unsere Absatzelemente und den Namen erstellt. Wir könnten die Funktion direkt darauf aufrufen. Nun, warum funktioniert dieser Code? Der Grund, der funktioniert, ist, dass das Objekt, auf das durch Elementpunkt-Prototyp verwiesen wird, tatsächlich eines der Objekte in der Prototypkette dieses Absatzelements, das wir erstellt haben. Mit anderen Worten, wenn diese rote Funktion auf dem Absatzelement ausgeführt wird, wird die Vergangenheit sie nicht direkt auf dem Absatz finden. Die Funktion wird in der gesamten Prototypkette durchsucht , bis sie auf diesem Elementpunkt-Prototypobjekt gefunden wird. Zweitens, um Szenen zu machen, wie ich in der vorherigen Vorlesung angespielt habe, sind es Probleme mit dem DOM-Aussterben Ansatz. Nun, was sind einige dieser Probleme? Erstens, lasst uns einfach den ganzen Lärm loswerden. Ich bin sicher, dass du mir zustimmen würdest. Wir müssen vorsichtig sein, wie wir die Lesefunktion anhängen. Zum Beispiel, wenn wir eine Eigenschaft erstellen, Nehmen wir einfach an, dass wir diese Lese-Eigenschaft oder eine Funktion auf den Prototyp des HTML-Absatzelements setzen , nicht das Elementobjekt. Denken Sie daran, dass wir das in unserem Beispiel getan haben. Nehmen wir an, wir haben es auf dem HTML-Absatzelement getan. In diesem Fall wären wir nicht in der Lage, diese Eigenschaft zum Beispiel ein Ankerelement zu verwenden. Lassen Sie mich Ihnen zeigen, was ich meine. Lassen Sie mich hier einen Code aufrufen. Und das war, was wir hatten, richtig? Wir setzen unsere Lese-Eigenschaft auf diesen Prototyp auf Elementobjekt. Wie ich bereits erwähnt habe, was passiert, wenn wir gehen und wir etwas Ähnliches tun, aber jetzt setzen wir diese Eigenschaft auf das HTML-Absatzelement. Wir machen es nicht direkt auf dem Element jetzt. Und dann, anstatt einen Absatz zu erstellen, Lassen Sie uns ein Anker-Tag erstellen. Und wir versuchen, diese Funktion auszuführen, die Eigenschaft auf dem Anker-Tag. Was wird passieren? So unsicher, dass Sie Array erraten haben, werden wir einen Fehler werfen. Konkret wird uns gesagt, dass dieses Rot keine Funktion ist , die auf diesem Anker-Tag definiert ist. Macht das Sinn? Und denken Sie darüber nach, warum das passiert. Denken Sie daran, dies liegt daran, dass die Prototypkette der Ankerelemente niemals ein Objekt enthält, auf das der HTML-Absatzelement Punkt-Prototyp verwiesen wird. Stattdessen wird es ein Objekt enthalten, auf das vom HTML-Ankerelement Punkt-Prototyp verwiesen wird . Und deshalb haben wir im vorherigen Beispiel unsere Methode tatsächlich weiter oben in der Prototypkette an diesem Elementobjekt angehängt. Also warum dann nicht einfach alle unsere Auslöschungen auf dieses Elementobjekt einschließen? Nun, das Erstellen einer Eigenschaft auf dem Element des prototypischen haben ähnliche Probleme. Beispielsweise wird es nicht für alle Knotentypen verfügbar sein, sondern nur für diejenigen vom Typ Element. Zum Beispiel, was, wenn wir einen Textknoten oder einen Kommentarknoten erstellt, et cetera, et cetera. Okay, Clyde wird dann einfach weiter in der Prototypkette arbeiten, anstatt unseren neu erstellten DOM-Austausch anzuhängen, der dem Elementobjekt zugegeben wird. Warum haben wir es einfach mit dem Knotenobjekt gemacht? Und ja, das ist eigentlich eine sehr gültige Frage. Warum fügen wir nicht einfach die höchste Note hinzu? In der Tat, warum fügen wir nicht einfach all unsere Auslöschungen auf dieses Objekt? Erinnern Sie sich an das Kapital O, das Objekt, Objekte. Warum machen wir das nicht einfach? Nun, das ist es, worüber ich in der nächsten Vorlesung sprechen möchte. Es gibt andere Probleme, indem Sie diese DOM-Auslöschung verwenden. Bleiben Sie motiviert, holen Sie sich einen Kaffee und wir sehen uns in der nächsten Vorlesung. 11. Die Probleme mit DOM Erweiterungen: DOM-Elemente durch Prototypobjekte erweitern zu können, klingt erstaunlich. Wir nutzen die Vorteile von JavaScript-prototypischer Natur. Und Scripting DOM wird sehr objektorientiert und es ist so verlockend, dass auch vor ein paar Jahren Prototyp-JavaScript-Bibliothek es in einem zentralen Teil seiner Architektur geschafft hat. Aber halten Sie an Ihren Pferden fest. Sie sind eine Menge Probleme mit der Umsetzung dominanter Aussterben als Weg. Und ich werde besprechen, warum es nicht die beste Idee ist. Nun, Sie können ein paar der Probleme auf dem Bildschirm sehen, ist nur mit dem ersten beginnen. Und wir haben uns das schon angesehen. Das erste Problem ist, dass wir den richtigen Prototyp wählen müssen. Wenn wir eine Eigenschaft an den Prototyp eines DOM-Elements anhängen, kann es nur von einem Objekt zugegriffen werden, das den gleichen Prototyp als Teil seiner Kette hat, haben wir uns Rechte verkauft. Wenn wir diese Leseeigenschaft zum Element hinzufügen, der Comic-Nerd keinen Zugriff auf die Raid-Eigenschaft, die die Hardware übernimmt und Zugriff auf die Vergewaltigungseigenschaft, et cetra, et cetera, hat. Das ist also das erste Problem bei diesem Ansatz. Zweitens, die keine Regeln. Denken Sie daran, DOM-Objekte oder Host-Objekte haben C, ich habe einen Rechtschreibfehler. Sie sind keine Gegensätze Objekte zum Thema „Keine Regeln“. Ich möchte nur sagen, dass ein großes Problem bei Verwendung all dieser Ansätze zum Hinzufügen von Eigenschaftenemittern ist, dass die Belichtung dieser DOM-Objektprototypen nicht garantiert ist. Warum ist es nicht garantiert? Nun, weil die DOM-Spezifikation es für Anbieter nicht zwingend macht, okay, Browser eine globale Elementeigenschaft zu haben, die zu einem Prototyp aller Objekte wird , die sie implementieren. Dies ist nicht als nicht obligatorisch angegeben, und es gibt auch nicht an, dass es eine globale Knoteneigenschaft geben sollte , die ein Prototyp aller Objekte ist , die diese Schnittstelle implementieren, ist, dass Sie argumentieren könnten, obwohl sie machen es nicht obligatorisch, die meisten Browser tun laut. Und es ist irgendwie wahr. Aber wenn wir anfangen, Internet Explorer sieben oder Safari zwei Beispiele zu betrachten, können wir diese Art von Dingen, die wir gesehen haben, nicht tun. Und Sie könnten argumentieren, Client, ja, aber sicher können wir dieses ganze Erweiterungsobjekt umgehen indem wir nur ein Objekt direkt erweitern. Zum Beispiel, wenn wir gehen und machen ein Absatzelement, denken Sie daran, P gleich Dokument oder Element erstellen. Können wir nicht einfach eine Eigenschaft zu ihrem Absatz hinzufügen? Nun, das können wir, aber leistungsweise, es ist keine gute Idee. Es ist sehr langsam. Aber jedenfalls möchte ich zu diesen Host-Objekten zurückkehren. Was sind die Probleme hier? Wir werden DOM-Objekte oder Host-Objekte und Host-Objekte sind am schwierigsten zu arbeiten. Hearst-Objekte erlaubten Dinge zu tun, von denen kein anderes Objekt überhaupt träumen kann. Wir könnten also sagen, dass das Erweitern von DOM-Objekten eine Art wie ein Gehen in einem Minenfeld ist. Per Definition arbeiten wir mit etwas, das sich unberechenbar und völlig unberechenbar verhalten darf . Dies ist schnell auf ein Beispiel schauen. Wenn wir geben Dokument erstellt Element p und wir existieren die Offset-Eltern-Methode. Dies funktioniert in Internet Explorer nicht. Wir werden einen Fehler bekommen. Das ist nur ein Beispiel für Watson, eine gute Idee und keine Regeln, die angeben, wie diese sich verhalten sollen. Das letzte, was ich besprechen möchte, sind Kollisionen. Sie müssen darüber nachdenken, was wir hier tun, wenn wir anfangen unsere eigenen Erweiterungen zu Objekten hinzuzufügen, wir müssen einen Eigenschaftsnamen und unsere Instanz finden, wo unser Beispiel wir es rot nennen. Aber was ist mit Angst ist bereits Teil des DOM. Können wir über Autoren hat keine anderen Knock-on-Effekte mit anderen Teilen des dominanten Codes. Denken Sie daran, HTML5 bringt ständig neue Methoden und Eigenschaften. Wer hat gesagt, dass er es hat? sind einige der größten Probleme, die ich mir vorstellen kann. Und nur um zusammenzufassen, meine Ansicht zu diesem ganzen Thema ist im Allgemeinen DOM-Aussterben auf keine gute Idee. Und das gilt auch, wenn Sie nur möchten, dass Ihre Website auf zwei Browsern funktioniert, Sie werden immer noch Kollisionsrisiken haben, die wir gerade besprochen haben. Also, was ist dann die Lösung? Will eine Lösung besteht darin, Objektschnellen zu verwenden. Und das ist ziemlich genau das, was jQuery von Anfang an getan hat. Aber wie auch immer, das ist ein Thema, das völlig jenseits des Geltungsbereichs dessen ist , was ich hier zu erreichen versuche. Ich hoffe, Sie haben viel über DOM-Aussterben gelernt. Hoffe, Sie bekommen irgendwie ein Gefühl, warum es nicht unbedingt die beste Idee ist. Aber wie auch immer, bleiben Sie motiviert und wir sehen uns in der nächsten Vorlesung. 12. Events sind nicht eine isolierte Störung: Alles klar, fangen wir an, über Ereignisblubbern zu reden. Und vergebens plappern, meine ich nur den Fluss jedes Ereignisses durch das DOM. Bis zu diesem Punkt im Kurs haben wir viele Möglichkeiten gesehen, um dem DOM zuzuhören. Der beste Weg ist die Verwendung dieser Add-Ereignis-Listener-Methode. Und wir alle wissen, wie das funktioniert. Aber was wir noch nicht besprochen haben, ist ein ziemlich fortgeschrittenes Thema, wie Ereignisse gefeuert werden. Das Wichtigste, was man aus diesem Abschnitt nehmen sollte , ist , dass jede Vene keine isolierte Störung ist, genau wie ein Schmetterling, der seine Flügel flattert, dann als Beben, ein Meteorschlag oder sogar ein Besuch von Hulk bekannt ist. Er denkt, wellige Wirkung, eine Reihe von Elementen, die in einem Pfad liegen. Wenn y i, bevor wir weitermachen, ist der Schmetterling gefälscht nur die Idee, dass kleine Dinge nicht-lineare Auswirkungen auf ein komplexeres System haben können. Wenn wir also die Schmetterlingsfälschung sagen, stellen wir uns einen Schmetterling vor, der mit den Flügeln flattert und einen großen Taifun verursacht. Lasst uns weitermachen. Ich will nicht abschweifen. Nun, ich möchte, dass wir etwas sehr, sehr Einfaches programmieren. Ich möchte ein sehr einfaches HTML-Dokument haben. Ich möchte ein Körperelement haben. Und innerhalb des Körpers, Lasst uns Ausländer haben, drei verschachtelte Divs. Und wir können dem ersten div eine Vorstellung von einem geben, dem Sekanten der Idee von zwei. Und im dritten verschachtelten Element, Lassen Sie uns zwei divs haben. Geben wir dem ersten div eine ID von drei a, und dem zweiten div eine ID von drei B. Und in jedem dieser divs enthalten Leads eine Schaltfläche. Die erste Taste können wir eine Vorstellung von Button 1 geben und die zweite Taste können wir eine ID der Taste auch geben. Wie wir sehen können, ist mit unserem Code nichts wirklich aufregendes los. Und der HTML-Code sollte ziemlich unkompliziert aussehen. Und mittlerweile sollten Sie in der Lage sein, dies im DOM-Baum abzubilden. Denken Sie daran, dass wir mit einem Fensterobjekt beginnen, das ist der König. Innerhalb dessen haben wir unser Dokumentobjekt, dann haben wir das HTML-Objekt, und dann können wir anfangen, alles zu mappen. Wir haben unseren Körper und dann haben wir diese Divs unter der Leiche. Wir haben ein div mit einer ID von eins, richtig? Innerhalb dieses haben wir ein anderes div mit der ID von zwei. Innerhalb dieses haben wir zwei divs mit den IDs von 33 b. Und natürlich haben wir innerhalb jedes dieser Begriffe ein Muster mit den entsprechenden IDs Qu. Also, hier geht's. Dies ist die Basis, mit der ich möchte, dass wir arbeiten, wie zum Beispiel Pause das Video jetzt, bevor Sie weitermachen, lassen Sie uns sinken und sie lassen sehen, was passiert, wenn wir auf eine dieser Schaltflächen klicken. 13. Event und Einfangen: Okay, schauen wir uns an, was passiert, wenn Sie auf eine Schaltfläche klicken. Denken Sie daran, dass wir unseren HTML haben und wir es in einem DOM-Baum getroffen haben. Und das ist so, dass die Untersuchung in diesem DOM-Baum beginnen wird. Und lassen Sie uns diesen HTML-Trichter loswerden, nur um das Geräusch zu entfernen. Und lasst uns auf Button 1 klicken. Was wird passieren? Nun, von dem, was wir bereits im Kurs gelernt haben, wissen wir, dass eine Nikki-Adern finden wird. Das Interessante, was wir nicht besprochen haben, ist, dass wir genau das Click-Ereignis von unserem Click-Ereignis ausgelöst wird, genau wie fast jedes andere Ereignis nicht bei dem Element stammt, mit dem wir interagiert haben. Das wäre viel zu einfach und würde viel zu viele Szenen machen. In unserem Fall stammt dieses Click-Ereignis nicht unten mit der ID von Button 1. Stattdessen stammen alle Adern bei der Trommelrolle. Die Seite, bei der es sich um das Fensterobjekt handelt. Also lasst uns das abbilden. Wir wissen, dass unser Tick-Event hier am Fensterobjekt beginnt. Ich weiß, dass es irgendwie seltsam ist, richtig, mit einem Klick auf den Button, aber das Ereignis beginnt eigentlich nicht mit dem Button. Es beginnt auf dem Fensterobjekt. Von diesem Stammfenster Fenster Object, verlassen Sie Tinte macht seinen Weg durch den schmalen Teil des DOM. Und das stoppt es, das Element, das das Ereignis ausgelöst hat. In unserem Fall stoppt es an dieser Schaltfläche mit einer ID von Button 1. Und es ist allgemein bekannt als die Togas, das Ereignisziel, wenn Sie so wollen. Denken Sie also daran, dass das am tiefsten verschachtelte Element, das das eigentliche Ereignis aufruft, in diesem Fall diese Schaltfläche als Zielelement bezeichnet wird. Und dieses Zielelement ändert sich während des gesamten sprudelnden Prozesses nicht. Wie wir gerade in diesem Diagramm hier gesehen haben, ist der Pfad, den Olivin nimmt ziemlich Gyrate, beginnt an der Wurzel und es geht den ganzen Weg hinunter zum Ereignisziel. Aber auf dem Weg benachrichtigt es irgendwie lästig jedes Element entlang des Pfades. Das bedeutet also, wenn a ein Ereignishandler ist der mit dem Element auf dem Pfad verknüpft ist, der mit dem gerade weitergehenden Ereignishandler übereinstimmt , wird auch aufgerufen wird nicht beendet. Sobald das Ereignis das Ziel erreicht hat, hört das nicht auf. Es ist wie eines dieser intergenen Hasen, wo er Batterien in die Venenröhre steckte, indem er Schritte zurückverfolgt und zur Wurzel zurückkehrt. Und genau wie zuvor, auf seinem Weg nach oben, wird jedes einzelne Element über dieses Ereignis informiert. Das bedeutet also, dass alle vorhandenen Ereignishandler auch kalt werden, solange es sich um dasselbe Ereignis handelt. In unserem Fall das Click-Ereignis. Das macht irgendwie Sinn. Ich weiß, es scheint zunächst etwas seltsam zu sein. Eines der wichtigsten Dinge, die man bemerken muss, ist, dass es keinen Weg getroffen hat. Und Aldon, wir initiieren eine Veranstaltung. Das Ereignis wird immer im Stammverzeichnis starten. Es wird entlang der DOM-Struktur reisen, bis es unser Event-Ziel erreicht. Und dann wird es gehen und zurück zur Wurzel fahren. Und diese ganze Reise ist sehr formell definieren, was ich damit meine. Nun, lassen Sie uns den ganzen Lärm loswerden. Und schauen wir uns das an. Wenn es runtergeht. Dies wird als Ereigniserfassungsphase bezeichnet. Und wenn es nach oben geht, und wie Sie wahrscheinlich erraten hätten, wird dies die Ereignis-Bubbling-Phase genannt. Je einfacher unter uns, auch ich selbst, nennen Sie es einfach Phase 1 und Phase 2. Es ist einfach einfacher. Seien Sie sich also bewusst, dass Sie den richtigen Namen als Ereigniserfassung sehen können, und Sie können den Begriff Phase 1 sehen. Beides kann austauschbar verwendet werden. Okay, ich glaube, ich habe in diesem Vortrag eine ganze Menge Informationen über dich gezogen. Ich will hier anhalten, aber wir haben noch einiges zu decken. In der nächsten Vorlesung, Lassen Sie uns beginnen, mehr in diesem Bereich zu vertiefen. Ich hoffe, du hast Spaß, bleibst motiviert und ich sehe dich in der nächsten Vorlesung. 14. So hörst du in der Einnahmephase: In Ordnung, um Sie daran zu erinnern, wir über das Sprudeln von Ereignissen sprechen. Und denken Sie daran, selbst plappern ist nur der Fluss jedes Ereignisses durch das DOM. Und wir haben gerade in der vorherigen Vorlesung gesehen, dass wir diesen ganzen Prozess irgendwie in zwei Phasen aufteilen können . Phase 1, aka die Erfassungsphase, sind wir, das Ereignis beginnt an der Wurzel und es funktioniert seinen Weg durch das DOM bis zum Ereignisziel. Das ist Phase eins. Wir haben uns auch Phase 2 angesehen, AKA die sprudelnde Phase. Und ziemlich intuitiv, ja, ich denke, so bläst das Ereignis den ganzen Weg zurück bis zur Wurzel. Wir sahen, dass alle Elemente in irgendwelchen Flügeln Pause, ziemlich glücklich sind. Während sie Glück gut, weil sie das Glück haben, zweimal benachrichtigt zu werden , wenn jedes Mal und einberufen, um die gefeuerten. Diese Art von vielleicht ein repariert die Kobe, richtig, nicht wahr? Denn jedes Mal, wenn wir auf Ereignisse hören, müssen wir jetzt wählen, auf welchem Gesicht wir für unsere Veranstaltung hören wollen. Auf. Hören wir uns unsere Veranstaltung an, ist es in der Capture-Phase herumfummeln. Was hören wir unseren Ereignissen zu, als ein Aufstieg in der sprudelnden Phase wieder aufsteigt? In welcher Phase soll ein Ereignis wirklich angehört werden? Nun, meine lieben Studenten, das sind wir, wir haben ein weiteres Argument für unsere Add-Event-Listener-Funktion. Denken Sie an die Syntax. Wir fügen diesen Schätzlistener zu einem Element hinzu. Sagen wir, wir müssen auf Ereignisse klicken. Und dann haben wir einen Handler namens Click-Handler , den wir noch nicht besprochen haben, ist, dass es tatsächlich ein drittes Argument für diese Funktion gibt. Und dieses dritte Argument gibt an, ob wir auf dieses Ereignis während der Erfassungsphase hören wollen . Mit anderen Worten, ein Argument der Wahrheit bedeutet, dass wir auf das Kind während der Erfassungsphase hören wollen. Macht das irgendwie Sinn? Und wenn wir nicht wahr haben, ist das Standard-Ende offensichtlich falsch. Und wenn wir Inline-Ereignis-Listener verwenden oder wenn wir nur Ihre Argumente für den Add-Ereignis-Listener angegeben haben. Der Browser weiß nichts über das Erfassen und Sie codieren Ihre Ereignishandler, die benötigt werden, um in der zweiten Phase in der Bubbling-Phase ausgeführt zu werden. Wenn y i, werden sie tatsächlich formal drei Phasen. Und dann ist die dritte Phase die Zielphase, die wir brauchen Vene hat das eigentliche Element erreicht. In der Praxis wird dies jedoch nicht separat gehandhabt. In der Tat lösen Handler sowohl in der Erfassungs- als auch in der Babbling-Phase auch in dieser Zielphase aus. Aber wie auch immer, und ich habe gerettet, fragen Sie sich wahrscheinlich, wie das alles funktioniert. Also hat es immer, springen wir zum Texteditor und lassen Sie uns mit dem Programmieren beginnen. 15. Bubbling gegen die Einnahmen – Beispiel 1: Alles klar, du kennst mich, ich liebe Beispiele. Also lasst uns knacken. Alles, was ich tun möchte, ist eine sehr einfache HTML-Seite zu erstellen. Ich möchte zwei Knöpfe einschließen. Also lassen Sie uns ein Tasten-Tag mit der ID von Button 1 machen. Und wir können den Knopf einfach eins nennen. Und wir können das einfach duplizieren. Und natürlich kann das auch Button sein. Das ist ziemlich genau das, was ich tun will. Sehr einfache Rechte, und ich möchte JavaScript enthalten. Beginnen wir mit dem Zugriff auf das DOM. Lassen Sie uns einfach einen Live-Server hier setzen, damit wir dies im Browser sehen können, während wir arbeiten. Lassen Sie mich das einfach rüber ziehen. Macht das Sinn? Hier haben wir einen Knopf eins und Knopf zwei. Gehen wir zurück zu unserem Texteditor und lassen Sie uns dieses JavaScript beenden. Was ich tun möchte, ist, dass ich auf Button 1 zugreifen möchte und ehrlich einen Ereignis-Listener daran anhängen möchte. Und dann will ich sehen, was passiert. Also, aber eins, wir wissen, wie man das schon macht. Wir greifen auf unsere Dokumentobjekte zu, eine Methode namens get element by ID. Die ID ist natürlich Button 1. Okay, toll, aber was ich jetzt tun will, nun, hören wir auf das Ereignis während der Capture-Phase und hören auch auf das Event und die sprudelnde Phase. Lassen Sie uns zuerst die Erfassungsphase machen. Lassen Sie uns also unseren Handler in der Erfassungsphase ausführen. Wie machen wir das? Nun, wir haben gerade gesehen, dass wir auf unseren Knopf zugreifen. Wir implementieren dann die Add-Ereignis-Listener-Methode. Wir wollen auf ein Klick-Event hören. Wir wollen dann eine Funktion namens Click-Handler definieren. Wir haben keine Tat definiert, wir werden enden. Das dritte Argument, das wir liefern müssen, ist wahr, denn jetzt wollen wir, dass sie unseren Handler in der Erfassungsphase hören und ausführen. Realistisch, genau das Gleiche. Aber jetzt lassen Sie uns ausführen, wie Handler in der Bubbling-Phase, und dies ist der Standard. Wieder können wir auf unsere Schaltfläche eins zugreifen. Wir fügen den Ereignis-Listener hinzu. Wir wollen auf ein Klick-Event hören. Wir wollen den Click-Handler ausführen. Aber jetzt wollen wir falsch setzen. Und das müssen wir nicht tun. Wir können einfach zwei Argumente einbringen. Aber ich wollte hier explizit sein, weil ich will, dass du weißt, was hinter den Kulissen passiert. Dies ist das Standardverhalten. Das Letzte, was wir tun müssen, ist natürlich unseren Handler zu definieren. Wir haben es Click-Handler genannt. Und lassen Sie uns einfach etwas sehr einfaches tun, ist nur Konsolenprotokoll. Oder ich wurde abgeschnitten. Sehr, sehr einfache ökonomische Szenen. Also lassen Sie uns speichern, gehen wir zu unserem Browser und öffnen Sie eine Konsole. Was wird passieren, wenn wir auf die Schaltfläche eins klicken? Was würden Sie erwarten, zu sehen? Nun, bevor ich Ihnen die Lösung zeige, gehen wir zurück zu unserem Code-Editor hier. Was wird passieren, wenn dieses Click-Ereignis auf Netzschaltfläche 1 ausgelöst wird. Weißt du noch, was passiert? Es wird an der Wurzel unseres Dokuments beginnen, ist nicht am Fensterobjekt und es wird den ganzen Weg hinunter zu dieser Schaltfläche reisen , eine Hand wir Net Event trifft Taste eins. Wir haben gesagt, Yeah, wir wollen den Click-Handler ausführen, weil wir true angegeben haben. Aber denken Sie daran, dass es nicht aufhört. Da, schaltet uns nicht ab, nachdem es auf den Grund gekommen ist. Das sogar Ziel, das dann den ganzen Weg zurück zum Fensterobjekt zurückreisen muss. Und so wird unser zweiter Ereignis-Listener ausgelöst, weil er auch auf ein Click-Ereignis wartet, das bereits ausgelöst wurde. Aber dieses Mal wird es zuhören und führt den Handler aus. Während der sprudelnden Phase. Gesät erwartete Konsolenprotokoll zweimal passieren. Eins Während der Erfassungsphase und zwei während der sprudelnden Phase. Nun, mal sehen, ob onCreate. Also lasst uns auf die Schaltfläche eins klicken. Ja, und Gewohnheit, ich habe geklickt, wurde Konsole zweimal auf dem Bildschirm protokolliert. Deshalb ist die Nummer 2, Zai Bu Gou. Ich hoffe, das ergibt Sinn. Lassen Sie uns motiviert bleiben, weil sie noch mehr müssen wir lernen. 16. Bubbling gegen die Einnahmen – Beispiel 2: Ordnung, Sie kennen mich mittlerweile, wie sehr ich Beispiele liebe und dieser hier wird ziemlich lustig sein, weil ich etwas tun will, um uns den gesamten Capturing und plappernden Prozess zeigen zu wollen. Es wird wirklich cool sein und wir werden die for-of-Schleife verwenden, um dies zu tun. Worauf warten wir also? Lass uns knacken. Was ich tun möchte, ist, dass ich eine einfache HTML-Seite erstellen möchte. Jetzt möchte ich nur Stile einschließen, um es ein bisschen klobig aussehen zu lassen. Und ich möchte unseren ganzen Körper stylen. Ich frage mich, dass alle unsere Elemente einen Rand von 10 Pixeln haben. Und ich möchte eine Grenze um jedes Element setzen. Wir erstellen dies, geben Sie ihm nur eine Breite von einem Pixel. Nehmen wir an, es ist ein fester Rahmen und listet die Farbe Rot auf. So einfach, da ist nichts zu schickes los. Lassen Sie uns jetzt unser Körperelement erstellen. In unserem Körper möchte ich drei verschachtelte Elemente erstellen. Lassen Sie uns zuerst ein div erstellen. Dann lassen Sie uns ein Formular erstellen. Lassen Sie uns die Aktion hier loswerden. Wir brauchen keine Aktion. Dann ist das letzte, was ich tun möchte, ein Absatzelement zu erstellen. Also gehen wir hin. Ziemlich einfach, richtig? Und wenn wir uns das im Browser ansehen, wird es so aussehen. Starten wir unseren Live-Server. Also gehen wir hin. Wir haben unser div, wir haben ein Formular und haben einen Absatz Elemente. Offensichtlich, wenn wir darauf klicken, wird nichts passieren, weil wir keinen Ereignis-Listener hinzugefügt haben. Also lasst uns das jetzt machen. Es wird ziemlich einfach sein. Lassen Sie uns zunächst unser JavaScript hier hinzufügen. Und denken Sie daran, was ich gesagt habe. Ich möchte die for-Of-Schleife verwenden. Ich möchte keinen Ereignis-Listener manuell hinzufügen. Und das wird jetzt ziemlich fortgeschritten, aber Sie werden sehen, wie einfach es ist, wenn Sie den Dreh bekommen. Die for of Schleife ist also eine sehr einfache Funktion. Bedenken Sie nur, wenn Sie nicht sicher sind, was es ist, können Sie immer überprüfen Sie mein JavaScript konkurrieren Großmeister-Kurs, um ein intuitiveres Gefühl zu bekommen , ist JavaScript selbst funktioniert zu helfen. Aber wie Sie sehen werden, ist es fast, fast genauso einfach wie das Lesen der Funktion. Was wir also tun wollen, ist, dass wir alle unsere Elemente auf unserer Seite durchlaufen und sie in eine Variable setzen. Lassen Sie uns unsere Variable als DOM-Element definieren. Und dann sind die Objekte, die wir durchlaufen wollen, was? Nun, das wird unsere Frage sein. Wählen Sie sie aus. Natürlich sind die anderen Möglichkeiten, wie wir es tun können, aber ich bin glücklich, unseren Abfrageselektor alle zu verwenden. Was wollen wir also tun, ist, wenn alle einzelnen Elemente in unser DOM integrieren. Es ist buchstäblich so einfach. Denken Sie also daran, was wir tun, wenn wir alle Elemente in unserem DOM über den Abfrage-Selektor finden, alle eine Sammlung von Rückkehr zu uns. Und wir durchlaufen diese Sammlung und jedes Element in dieser Sammlung wird in eine Variable , die hier DOM-Element genannt wird, gesetzt. Und jetzt möchten wir Ereignis-Listener zu all diesen hinzufügen, keine Sorge. Und wir wollen es sowohl für die Erfassungsphase als auch für die sprudelnde Phase tun. Also beschäftigen wir uns zuerst mit der Erfassungsphase. Wir werden auf unser Element zugreifen, das uns zurückgegeben wurde. In diesem Element werden wir einen beliebigen Ereignis-Listener hinzufügen, einen Click-Ereignis-Listener. Und ja, jetzt könnten wir tatsächlich eine Handler-Funktion definieren, aber ich möchte sie nur in Zeile ausführen. Also werde ich nur das Pfeil-Syntaxjahr verwenden. Und was werden wir tun? Lassen Sie uns einfach etwas auf dem Bildschirm alarmieren. Lassen Sie uns Vorlagenliterale verwenden. Auch wenn Sie nicht wissen, was das alles ist, schauen Sie sich bitte den kompletten Grandmaster-Kurs meines JavaScript an. Wenn du weißt, was es ist, großartig, kannst du mitverfolgen. Wie ich bereits erwähnt habe, wird dies für die Erfassungsphase sein. Und jetzt möchte ich die Dollar- und geschweifte Klammer-Syntax verwenden, um eine Variable einzufügen. Hier werden wir unser DOM-Element verwenden. Und ich möchte den Tag-Namen bekommen. Zum Beispiel das HTML, die Taube, das Formular, das p, was auch immer ihr Tag-Name ist. Und um zu spezifizieren, dass wir wollen, dass dies auf die Erfassungsphase hört, was müssen wir tun? Das ist richtig, Wir müssen ein drittes Argument für die Add-Ereignis-Listener-Methode zur Verfügung stellen. Und das dritte Argument muss wahr sein. Nun, das Letzte, was wir tun wollen, ist genau das Gleiche zu tun. Aber in der Bubbling-Phase, greifen Sie auf unser Element zu, wir fügen die addEventListener Methode hinzu. Auch hier wird es ein Klick-Ereignis sein und wir können die Pfeil-Syntax verwenden. Wieder mal. Ich möchte Sie nur wissen lassen, dass wir es nicht wirklich in geschweifte Klammern setzen müssen , wie wir es oben getan haben. Wir können tatsächlich einfach unsere Alert-Funktion direkt ausführen, indem wir alert eingeben. Okay, ich möchte dir nur verschiedene Arten zeigen, Dinge zu tun. Ja, es wird in der sprudelnden Phase sein. Und ich möchte genau dasselbe tun. Ich möchte seinen Tag-Namen anzeigen. Also los geht's. Ist das eine Art, Dinge zu machen? Ist es intuitiv? Ich hoffe es. Gehen wir zu unserem Browser und lassen Sie uns darüber nachdenken, was passieren würde, wenn wir gehen und auf dieses Absatzelement klicken. Was denkst du, wird passieren? Wir machen einen Schritt zurück. Wir tun, dass alle Ereignisse daraus stammen, stammt aus dem Fensterobjekt aus der Wurzel unseres Dokuments, Südspanien, während der Erfassungsphase, für viele Warnungen angezeigt werden, oder? In der Tat aus erwartet, dass sie vom HTML-Tag selbst beginnen. Und es wird blase hinunter in den Körper in es wird die Taube in der Form treffen. Und schließlich werden ein Absatzelement und ein Netz die Erfassungsphase bilden, aka Phase eins. Es hört nicht auf, oder? Denn was passiert als nächstes? Das ist richtig. Es wird den ganzen Weg zurück zum Wurzelelement sprudeln. Ich hoffe, es ergibt Sinn. Lassen Sie uns also auf diesen Absatz klicken und sehen, was passiert. Nun, da gehen wir. Wir wissen, dass wir in der Erfassungsphase sind. Und es ist HTML. Das ist genau das, was wir erwartet haben, wenn wir ein k nehmen, werden erwartet, dass der Körper und das ist, was wir haben. Wie genial. Der nächste Punkt, der erfassen wird, ist natürlich das div-Element. Dann wird es das Formelement machen. Und dann schließlich das Absatzelement. Wie ich bereits erwähnt habe, hört es hier nicht auf, oder? Denn was jetzt passieren wird, wenn wir auf OK klicken, Nun, das ist richtig. Es wird die sprudelnde Phase beginnen. Und die sprudelnde Phase beginnt am Ereignisziel, in diesem Fall das p. Und es wird seinen Weg bis zum Window Root-Objekt arbeiten. Also würde ich erwarten, dass die nächste Warnung das Formular ist. Das ist richtig. Der nächste wäre das div. Der nächste wird der Körper sein. Der nächste wird der HTML sein. Und dann sind wir fertig. Mann, das Zeug ist wirklich genial und es ist sehr, sehr fortgeschritten. Jetzt verstehen Sie den gesamten Prozess , über den der Stall mehr ich reden will, und ich werde Sie in der nächsten Vorlesung sehen. 17. Warum die Einnahmen und die capturing von Angelegenheiten: Oder seltsam, wir kommen auf dem Weg. Sie verstehen die verschiedenen Phasen, die Erfassungsphase und die sprudelnde Phase. Aber an diesem Punkt fragen Sie sich wahrscheinlich, warum ist das alles wichtig? Wen kümmert es? Und das ist eine sehr gültige Frage, vor allem, wenn er schon sehr lange mit den Adern gearbeitet hatte und Sie noch nicht wirklich darauf gestoßen sind. Und dies ist das erste Mal, dass Sie von diesen verschiedenen Phasen gehört haben. Und ich werde ehrlich sein, meistens spielt es keine Rolle. Mit anderen Worten, unsere Wahl, ein Ereignis während der Aufnahme oder der sprudelnden Phase zu hören , ist meist irrelevant was Sie und ich 99 Prozent der Zeit tun werden. Aber wenn er immer die Fledermaus ist. Mit dem besagten, werden sie eine Zeit in Ihrem Leben kommen, wo Sie zwischen Erfassung und sprudelnden unterscheiden müssen , vor allem, wenn Sie ein wenig von ihren Schriften tun, Dinge auf Ihrer Website, was ich meine, werden Sie die meisten wahrscheinlich zwischen den beiden unterscheiden müssen, wenn Sie mit verschachtelten Menüs zu tun haben, die Untermenüs anzeigen, wenn Sie den Mauszeiger über sie bewegen. Möglicherweise benötigen Sie auch dieses Wissen, das wir mit einer Bibliothek von Drittanbietern beschäftigen müssen. Mit dieser Bibliothek verfügt über eine eigene Ereignislogik, die Sie für Ihr eigenes benutzerdefiniertes Verhalten umgehen möchten . Und ein anderes Szenario, in dem wichtig wird, zwischen Babbling und Capturing zu unterscheiden , ist, wenn Sie einen integrierten Standardbrowser überschreiben möchten. Hier. Nun, was ist ein Beispiel, wenn Sie auf die Bildlaufleiste klicken oder sich auf TextField konzentrieren, et cetera, et cetera, et cetera. Wenn Sie beginnen möchten, all diese Dinge zu überschreiben, möchten Sie vielleicht nur Adern in einer bestimmten Phase zu hören. Also da hast du es. Ich wollte nur diese Offenlegung zur Verfügung stellen. Cool, okay, aber jetzt wissen wir von plappern, wir wissen über das Einfangen. Aber was ist, wenn wir nicht wollen, dass das passiert? Was ist, wenn wir auf ein Absatzelement klicken? Wir wollen nur, dass der Handler feuert. Wir wollen nicht, dass der gesamte Bubbling-Prozess stattfindet. Was machen wir denn? Nun, halten Sie sich an Ihren Pferden fest. In der nächsten Vorlesung. 18. So stoppst du die event und Sprudeln: Das letzte, worüber ich sprechen möchte, bevor ich einen weiteren Kaffee trinke ist, wie wir verhindern können, dass unsere Veranstaltung sich ausbreitet, von plappern und davon abhalten können, fortzufahren. Manchmal wollen wir nicht, dass unsere Veranstaltung den ganzen Weg zurück nach oben sprudelt. Mit anderen Worten, wir wollen unser Ereignis töten, aka es davon abhalten, die Wurzel zu erreichen und sein Leben zu beenden, haben wir die Stop-Propagierungsmethode, die verhindert, dass unser Ereignis durch unser DOM läuft. Okay, klingt einfach genug. Also, wie funktioniert es? Rufen Sie hier unsere DOM-Struktur auf. Erinnerst du dich an diesen? Und denken Sie daran, dass wir einen Klick-Listener auf den unteren einen eingefügt haben. Wird LET auch einen Klick-Listener auf das div mit der ID von drei a einfügen und was denkst du würde passieren, wenn wir die Stopp-Propagierungsmethode auf das div mit der ID von drei a setzen , was würde passieren? Nehmen wir also an, der Benutzer kommt mit jedem Klick-Button eins. Das erste, was passiert, ist, dass die Ereignisse im Stamm unserer Seite Punkte, die das Fensterobjekt ist. Ein Däne beginnt den DOM-Baum hinunter zu reisen und hält an jedem Element entlang. Auf dem Weg, den wir das wissen , wird es dieses div mit drei als ID treffen. Und was wird passieren? Nun, die Venen werden an diesem Punkt gestoppt werden. - Warum? Nun, weil wir tatsächlich gestoppt hatten, dass die Propagierung auf diesem Handler aufgerufen wurde. Macht es Sinn? Mach dir keine Sorgen, wenn nicht, ich möchte jetzt zur Konsole springen und ich möchte das mit dir codieren, damit du es in Aktion sehen kannst. Siehst du jetzt. 19. Ein Beispiel, der die Vermehrung zu verwenden: Oder ich erinnere mich, wir hatten diesen Code ein paar Vorträge zurück. Wir haben gerade einen Knopf eins und Knopf zwei. Und wir haben einen Ereignis-Listener eingefügt, insbesondere einen Click-Ereignis-Listener auf jede dieser Schaltflächen. Eigentlich wissen Sie was, wir brauchen nicht einmal Knopf, um, lassen Sie mich einfach loswerden Knopf, um uns zu verwirren. Also haben wir gerade Button 1 und wir fügen diese Ereignis-Listener unten hinzu. Aber denken Sie daran, dass das Click-Handler-Ereignis während der Erfassungsphase und während der Bubbling-Phase ausgelöst wird. Und dann hatten wir zwei Konsolen. Erinnerst du dich daran? Jetzt will ich die Dinge vermischen, oder? Ich möchte tatsächlich etwas hinzufügen, Sie wissen, was TO , wir haben nur einen Knopf, den ich tatsächlich erstellen möchte. Lassen Sie uns ein div mit einer ID von drei erstellen. Und dann innerhalb dieses div möchte ich diese Schaltfläche einfügen. Macht es Sinn? Also mögen sie gehen, aber jetzt möchte ich die Dinge als SATA vermischen. Ich möchte tatsächlich einen Listener zu diesen div-Elementen hinzufügen. Also lasst uns das machen. Und Zuhörer auf unsere div Eltern Elemente. Das erste, was wir tun wollen, ist, dass wir dieses div in einer Variablen definieren wollen. Also lassen Sie uns es als drei definieren. Und natürlich fangen wir mit unseren Dokumentenobjekten an. Wir erhalten Element nach ID. Die ID hier ist drei, eine ziemlich einfache Trocknung. Das nächste, was ich tun möchte, ist, dass ich einen Ereignis-Listener hinzufügen möchte. Also, das ist Zugang. Ereignis-Listener hinzufügen. Wir werden auf das Click-Ereignis hören. Und dann rufen wir einfach unseren eigenen benutzerdefinierten Handler an, beendet ihn. Und wir wollen uns das anhören und dieses Handle ausführen , wenn ich es während der Erfassungsphase tun möchte. Deshalb müssen wir true als drittes Argument angeben. Und schließlich müssen wir nur unseren Handler definieren. Eins. Sehr einfach, sehr intuitiv. Und ich möchte, dass eine Konsole etwas auf dem Bildschirm protokolliert. Sagen wir einfach, du wurdest in deinen Spuren gestoppt. Und das Letzte, was ich tun möchte, ist, dass ich unser Event selbst packen möchte und wie machen wir das? Nun, wir können das in jeder Variablen definieren. Wir einmal, erinnere mich, dass ich sagte, dass die meisten Entwickler in der Standardpraxis, um es nur als E zu definieren . Also jetzt wollen wir unser tatsächliches Ereignis greifen und wir wollen diese Stopp-Propagierungsmethode darauf aufrufen. Ich hoffe, das ergibt Sinn. Lassen Sie uns also darüber nachdenken, was passieren wird, wenn wir auf diese Schaltfläche klicken. Wir wissen, dass das Ereignis an der Wurzel beginnt, oder? Und es fährt jedes Element hinunter. Es wird schließlich die drei Elemente treffen, die auch die gleiche Click-Ereignis-Listener-Methode darauf hat, dieses Ding und diese Funktion ausführen. In diesem Fall geht es zum Konsolenprotokoll, Sie wurden in Ihren Tracks gestoppt. Aber dann wird es die Ausbreitung stoppen. Es wird das geäderte davon abhalten, weiter zu reisen. Also würde ich nicht erwarten, dass diese Click-Handler-Funktion sogar aufgerufen wird. Mal sehen, ob wir schreiben. Gehen wir zu unserem Browser. Öffnen wir die Konsole. Und lasst uns auf diesen Button klicken. Bist du bereit? Du wurdest in deinen Spuren gestoppt und nichts anderes passiert. Und um Ihnen das zu beweisen, Lassen Sie uns hier gehen und kommentieren Sie die Stopp-Ausbreitung. Gehen wir zurück zu unserer Konsole, löscht und lasst uns erneut klicken. Dies wird das Standardverhalten sein. Es wird zeigen, dass du in ihren Spuren gestoppt wurdest, aber dann geht es weiter. Es wird diesen Knopf drücken. Es sind Ereignishandler, die aufgerufen werden, und dann wird es während der Bubbling-Phase wieder aufgerufen werden. Also da hast du es. Ich hoffe, es ist an der Zeit zu sinken. Ich hoffe, es fängt an, intuitiver zu werden. Und wie Sie sehen können, ist es nicht so schwierig, wenn wir die Grundlagen verstehen, oder? Bevor wir mit dem nächsten Vortrag übergehen, möchte ich nur etwas schnell erwähnen und das ist dieser Stopp der Ausbreitung Methode wird die Bewegung der Venen stoppen, die nach oben fahren, richtig? Aber auf dem vorhandenen aktuellen Element werden alle anderen Handler ausgeführt. Mit anderen Worten, wenn ein Element mehrere Ereignishandler für ein einzelnes Ereignis hat, dann selbst wenn einer von ihnen das Babbling stoppt, sollten alle anderen Ereignishandler ausgeführt werden. Und das kann absolut in Ordnung sein, ein Baby, was Sie wollen. Aber wenn Sie tatsächlich den Bubbling-Prozess stoppen und Pervade-Handler auf dem aktuellen Element ausführen möchten. Diese andere eng verwandte Methode namens stoppen sofortige Ausbreitung. Ich wollte Sie nur wissen lassen, dass das existiert. Und das bedeutet nur, dass oft gefeuert wird. Keine andere Hand wird auch auf diesen vorhandenen Element ausgeführt. Große Hoffnung, dass du Spaß hast, und ich sehe dich in der nächsten Vorlesung. 20. Event – Intro: In einer der vorherigen Vorträge haben wir gesehen, dass das Unterscheiden zwischen Katherine und Bündelung nützlich ist, aber vielleicht ist es nicht ganz entscheidend, weil 99 Prozent der Zeit, es uns egal ist. Wir freuen uns, nur ein Ereignis in der sprudelnden Phase zu hören. Aber das bedeutet nicht, dass plappern sich nicht entscheidend ist, um zu verstehen. In der Tat, wenn Sie Ihre Web-Entwicklung Korea ernst nehmen wollen, müssen wir plappern verstehen. Und einer der Hauptvorteile von plappern ist das, was in der Branche als Event-Delegation bekannt ist. Was ist eine Event-Delegation und wie passt sie dazu? Nun, die Idee ist sehr einfach. Angenommen, wir haben viele Elemente, die wir auf eine sehr ähnliche Weise behandelt werden wollen. Option eins ist, dass wir Ereignis-Listener an jedes einzelne dieser Elemente anhängen könnten. Aber wie Sie irgendwie davonkommen können, bekomme ich mit diesem, das sehr ineffizient ist. Ich werde eine Menge redundanten und sich wiederholenden Code haben. Anstatt Ereignishandler auf jedes einzelne Element zu setzen, müssen Sie nur einen gemeinsamen Vorfahren auswählen, den gewünschten Ereignishandler in Netze setzen und sich auf Bubbling verlassen. Und was ziemlich geschickt ist, ist, dass sich daran erinnern, dass die Add-Ereignis-Listener-Methode. Was es uns gibt, wenn ein Ereignis in Ordnung ist, gibt es uns dieses Ereignisobjekt. Erinnerst du dich an E? Und auf diesem E Wir können tatsächlich auf das Element Mikrofon zugreifen das das Ereignis mit seiner Ereigniszieleigenschaft ausgelöst hat. Wovon rede ich? Nun, ich denke, der beste Weg ist, ein sehr endgültiges Beispiel zu betrachten , wo wir viele Blöcke haben und was auch immer blockieren, ich möchte diese Farbe ändern. Sehr, sehr cool. Und dann möchte ich, dass du deine Hand bei einigen Herausforderungen ausprobierst. Also genießen Sie es und fangen Sie an, es zu realisieren. Dies ist der große Vorteil, wenn es darum geht, plappern zu verstehen. Ich hoffe, du hattest Spaß, ich hoffe, du hast einen Kaffee. Du verschwendest meins. Weil meins. Also habe ich am Ende. - Ja. Wir sehen uns in der nächsten Woche, um es zu genießen. 21. Box-5-5-: Willkommen zu dieser großartigen Herausforderung, oder kann es kaum erwarten, mit Ihnen in die Sache zu kommen. Aber worum geht es eigentlich? Wir werden, erstens, Sie können sehen, wir haben einen Tisch auf unserem Bildschirm ist ein Schlagen auf den Tisch. Und wenn ich auf diesen Schlag auf den Tisch klicke, passiert nichts. Aber was passiert, wenn ich auf eine dieser Zahlen klicke, wird einfach auf die Nummer eins klicken. Wir können sehen, dass es liest. Wenn ich nun auf die Überschrift der Tabelle klicke, um den Tisch herum, passiert nichts, was auf die Nummer zwei begrenzt ist. Nun, wie wir sehen können, ist die Farbe Rot, die Hintergrundfarbe auf Nummer eins verschwunden. Und jetzt hat der Block Nummer zwei eine Hintergrundfarbe von Rot. Also ich weiß, dass du denkst und Clyde, das ist ein super-einfaches Beispiel und du bist 100 Prozent Klasse. Aber die Lektionen, die du in dieser Herausforderung der Hemmung lernen wirst, sehr, sehr wichtig. Also überlegen Sie, wie Sie das codieren können. Denken Sie daran, dass wir uns auf das verlassen wollen, was wir über Paddeln gelernt haben. Denken Sie daran, plappern ist eine sehr, sehr mächtige Technik und nicht viele entwickeln, wie wirklich schätzen die Macht des Verständnisses der Öffentlichkeit. Ich möchte nicht, dass Sie Ereignis-Listener für jedes einzelne dieser Elemente hinzufügen. Ich möchte, dass Sie einen Ereignis-Listener auf dem übergeordneten Element hinzufügen weil Sie wissen, dass unabhängig davon, wo Sie im DOM klicken, dieses Click-Ereignis den Dom durchqueren wird, ob es nicht nach oben gehen wird, es wird blase den ganzen Weg nach oben an unserem Wurzelelement. Also in diesem Sinne, gib es mal, schnapp dir einen Kaffee und genieße es einfach. Viel Spaß mit diesen Dingern, denn darum geht es hier. Es geht darum, Spaß zu haben. Aber auf dem Weg, lernen sehr wertvolle Informationen als auch. Also sehe ich dich in der nächsten Vorlesung. 22. Box-5-: Nichts ist wie ein guter, guter Kaffee. Und das wird eine wirklich lustige kleine Übung. Weil, wie Sie gesehen haben, was wir haben ist, dass wir viele kleine quadratische Blöcke haben werden. Wenn wir auf diese Blöcke klicken, möchten wir, dass sich die Farben ändern. Und denken Sie daran, was wir versuchen zu tun. Wir versuchen, unser Wissen über Bubbling zu nutzen weil Hefe wir einen individuellen Ereignis-Listener an jeden einzelnen Block anhängen könnten. Das bedeutet, dass Opcode sehr repetitiv wird und sie überflüssig werden. Es ist eigentlich nicht leistungseffizient. Also jetzt werden wir uns auf die Tatsache verlassen, dass, egal wo wir klicken, dieses Ereignis aufblasen wird. Und es wird immer nach dem ultimativen Eltern-Div sprudeln, richtig? So können wir einfach einen Ereignis-Listener an ihr übergeordnetes Div anhängen, wissen, dass wir immer Zugriff auf das Ereignisziel selbst haben. Ich weiß, dass du von den Ältesten etwas verrückt bist, aber mach dir keine Sorgen, wir werden uns sofort darauf einlassen. Sie können hier sehen, wir haben unseren Texteditor auf der linken Seite. Wir haben unseren Browser auf der rechten Seite, so dass wir tatsächlich sehen können, was für ein Fix unser Code im Browser hat. Diese spezielle Vorlesung hier möchte ich, dass wir unser Skelett aufsetzen. Und in der nächsten Vorlesung werden wir anfangen, JavaScript hinzuzufügen und dies in Aktion zu sehen. So genießen Sie es und haben Spaß. Das wird ein sehr informativer Vortrag, Audios. Das erste, was wir tun wollen, ist, dass wir unseren HTML aufsetzen wollen. Und Sie können hier sehen, ich habe eine index.html Datei und ich habe eine styles.css. Also ganz einfach, lassen Sie uns eine HTML-Vorlage einrichten und starten Sie einfach das Fleisch unserer Seiten zu erstellen. Ich werde all diese grauen Blöcke in einen Tisch wickeln. Und dieser Tisch ist das, was die Eltern von allem anderen sein wird. Und daher ist es diese Tabelle, an die wir einen Ereignis-Listener anhängen möchten. Also will ich ihm nur ein I D geben und mich erinnern, worüber wir hier lernen. Wir lernen etwas über die Delegation von Veranstaltungen. Warum also nicht einfach die Delegationstabelle nennen, da es an einem besseren Wort fehlt. So würden sie mit dem, was unser Tisch gehen. Und jetzt will ich, dass wir eine Überschrift für unseren ganzen Tisch erstellen. Lassen Sie uns eine Überschrift mit dem th-Tag hinzufügen. Und ich weiß nicht, wir können einfach sagen, Hey, lass es uns ein bisschen fett haben. Wir können Delegation sagen. Tabelle, klicken Sie auf, um die Farbe zu ändern. Also retten wir das. Da gehen wir. Wir können es in unserem Browser sehen, aber das ist nur die Tabellenüberschrift. Was wir jetzt tun können, ist, dass wir eine weitere Zeile hinzufügen können. Und in dieser Reihe lassen Sie uns einfach einige Punkte sind jetzt. Und ich will nur mutig. Cool auf Nummer eins. Also, da wir gehen, ist die Nummer 1. Und lassen Sie uns drei Spalten haben. Also gehen wir hin. Es kann eine geben, das kann zwei sein, und das kann sein, diese Formatierung sieht schrecklich aus. Sie können die Einheit auf der linken Seite sehen und die 23 sind Haufen zu den Unruhen. Und wenn du das nur inspizierst, wirst du genau wissen, was passiert. Es kommt übrigens auf unser Schlagen an. Ich zeige Ihnen, warum jetzt, erweitern Sie das einfach schnell. Was hier eigentlich passiert. Zao Schlagen nimmt den ganzen Raum in einer Zelle ein. Mit anderen Worten in einer Spalte und es ist dehnbare Netzsäule, weshalb dies geschieht. Also, was wir eigentlich tun wollen, ist diese Überschrift. Wir wollen uns über drei Säulen erstrecken, nicht wahr? Also zeige ich dir, was ich meine, und komm zurück, wie wir es hatten. Da gehen wir. Und mit diesem Schlag wollen wir es nur in drei Spalten zusammenfassen. Da gehen wir. Jetzt sind sie alle gleichmäßig verteilt. Also gehen wir hin. Das ist buchstäblich unsere erste Reihe. Dann will ich noch eine Reihe haben. Und natürlich, denn das kann fünf sein, und das kann sechs sein. Und du hast es erraten. Wir können noch einen haben, den wir 789 haben können. Wie sieht das aus? Es fängt an, Gestalt anzunehmen. Aber jetzt gehen wir einfach zu unseren Styles hier schnell. Erstens müssen wir einen Kopf einbeziehen. Und innerhalb des Kopfabschnitts können wir einen Link zu unserer CSS-Datei einfügen. Und wir wissen, dass es Stile heißt. Wir können zu unserem Stylesheet gehen, natürlich ist es jetzt leer, aber lassen Sie uns einfach diesen Tisch wählen, damit er ein bisschen funky aussieht. Also, wie sollten wir beginnen unsere Tabelle wird zuerst, lasst uns unsere Tabelle greifen und wir können es mit seiner ID zu greifen, die wir Delegationstabelle genannt. Denken Sie daran? Also haben wir unseren Tisch. Das nächste, was wir tun wollen, ist, dass wir jede Zelle stylen wollen, jede Tochterzelle in unserem Tisch. So können wir einfach das td Tag wählen. Und los geht's. Wir können die Breite jeder Zelle definieren, vielleicht ein 150 Pixel. Es sieht besser aus. Und wir können das gleiche mit der Höhe tun. Lassen Sie uns vielleicht ein 100 Pixel beginnen, gut aussehen. Und wir können die Linie in die Mitte nehmen. Und lassen Sie uns einen schönen hellen Hintergrund geben. Das sind also schneller Stil. Er hat unser HTML und jetzt möchte ich, dass Sie versuchen , darüber nachzudenken, wie wir den Darm dazu bearbeiten können. Denken Sie daran, was wir tun wollen, wenn wir auf eine Zahl klicken, wir wollen, dass die Hintergrundfarbe zu ändern, um zu lesen. Also pausieren Sie das Video hier, denken Sie darüber nach und ich sehe Sie weiter in der nächsten Vorlesung. 23. Box – Lösung: Okay, genau hier haben wir aufgehört. Denken Sie daran, dass wir unseren HTML beendet haben und wir haben diese coolen kleinen Blöcke, schlecht, natürlich, wie Sie wissen, wenn wir auf diese Blöcke klicken, passiert nichts und das ist, was ich will, dass wir jetzt tun. Also lasst uns reingehen. Was ist der erste Schritt, den wir tun müssen? Nun, lasst uns reiten. Wir müssen ein Skript-Tag direkt einschließen. Skript-Tag. Und lasst uns das langsam in Schritten bauen. Okay, also denk daran, was wir tun wollen. Wir wollen uns auf den sprudelnden Effekt verlassen, die Tatsache, dass Ereignisse durch das DOM sprudeln. Mit diesem gesagt, das erste, was wir tun wollen, ist, dass wir einen Ereignis-Listener an unser übergeordnetes Element anhängen möchten, das in diesem Fall die Tabelle ist. Also hier wollen wir eine Variable definieren und ihre nennen es Tabelle. Und wir können diese Tabelle erhalten, indem wir auf einen Berater zugreifen, der Element nach ID-Methode erhalten. Wir wissen das, wir haben so viele, viele Male durchgemacht und seine ID ist Delegationstabelle. Lassen Sie uns einfach überprüfen, dass die ID-Delegationstabelle ist. Das ist richtig. Was ist cool an diesen Texteditoren? Wenn ein hervorgehobener wir sehen können, ist es genau das gleiche Verschütten, lädt es, es wird funktionieren, es so ausgedrückt. Also gehen wir hin. Wir haben unseren Tisch, und jetzt wollen wir einen Ereignis-Listener anhängen. So berühren und Ereignis-Listener. So greifen wir auf unser Tabellenobjekt zu. Wir greifen dann auf eine Methode namens add event listener. Wieder wissen wir das. Wir wollen auf ein Klick-Event hören. Und dann wollen wir unsere benutzerdefinierte Event-Handler-Funktion definieren. Und es heißt nur, es Farbe zu ändern, denn genau das wollen wir tun. Also gehen wir hin. Wie cool ist das? Wir haben schon angefangen, es zu tun. Und Sie können sehen, wenn wir es stückweise machen, ist es nicht so schwierig. Der nächste Schritt ist natürlich, dass wir diese ChangeColor Funktion definieren müssen. Und was machen wir hier? Denken Sie daran, was jetzt passieren wird, wenn wir auf eine einzelne dieser Zellen innerhalb der Tabelle klicken, werden die Venen nach oben rechts blasen. Und wir können beweisen, dass es das tut. Wenn wir Konsolenprotokoll, etwas wurde geklickt und wir haben unseren Browser, wir greifen auf die Konsole zu. Mach das einfach ein bisschen größer. Fakultät mich machen es Vollbild. Lassen Sie uns auf unsere Konsole zugreifen. Und nun lasst uns auf, sagen wir die Nummer eins, etwas wurde angeklickt. Auf die Nummer fünf wurde nochmals etwas geklickt. Ihre Höhe. Wie genial dieses Ziel. Aber lassen Sie uns weitermachen. Gehen wir zurück zu unserem Texteditor. Lasst uns diese volle Größe jetzt machen. Und jetzt können wir anfangen, in die Nitty-Gritty zu kommen, oder? Denn im Moment wissen wir, dass etwas angeklickt wurde, aber wir wissen nicht, was angeklickt wurde. Und denken Sie daran, mit dieser addEventListener Methode, Wochenende ein tatsächliches Objekt und Ereignisobjekt gegeben. Und um auf dieses Objekt zuzugreifen, müssen wir es in eine Variable setzen, wie ich zuvor im Kurs erwähnt habe, verwenden wir am häufigsten den Buchstaben E. Jetzt haben wir dieses Ereignis und wir können es tatsächlich in eine andere Variable. Sagen wir einfach, späte Ziele sind das Ereignis Togas. Und dann, um es Ihnen zu beweisen, können wir dieses Ziel ausloggen. Sie werden genau wissen, woher dieses Ereignis kam. Gehen wir zurück zu unserem Browser. Lassen Sie uns die Konsole löschen und klicken Sie auf diese erste. Ziel ist nicht definiert. Was habe ich falsch gemacht? Das heißt Terroristen sollten Ziel sein. Uga. Einfacher Verschütten Fehler ist zurück zu unserem Browser. Das ist klar, diese Konsole und lassen Sie uns auf diese erste klicken. Und da gehen wir. Wir nehmen buchstäblich dieses td-Element auf. Wie toll ist das Starke? So wissen wir jetzt, dass wir auf das tatsächliche Element zugreifen können, das dieses Ereignis ausgelöst wird. Also gehen wir hin. Lassen Sie uns die Konsole entfernen. Was Sie denken, dass wir jetzt tun müssen, ist, die Farbe zu ändern. Aber wie ändern wir jetzt die Farbe? Nun, es gibt ein paar Möglichkeiten, wie wir es tun können. Der einfachste Weg, den ich mir vorstellen kann, ist, eine Klausel zu definieren und diese dann einfach nahe an das Element hinzuzufügen, auf das geklickt wurde. Gehen wir schnell zu unserem Stylesheet. Ich zeige dir, was ich meine. Und was ich tun will, ist, dass ich wieder auf unseren Delegationstisch zugreifen möchte. Und jetzt möchte ich dieses Mal unsere eigene benutzerdefinierte Klasse zu jedem TD-Tag-Rechte hinzufügen . Und ich möchte diese Sache nennen, ich weiß nicht, Highlight, denn das wollen wir tun. Wir wollen die Zelle eine bestimmte Farbe hervorheben. Und natürlich, was wir hier tun wollen, ist, dass wir einfach seine Hintergrundfarbe in Rot ändern wollen. Das ist alles, was wir tun wollten. Also, wenn wir hier zurück zu unserem Index gehen, genial, Also haben wir unsere Klasse von Highlight, von der wir wissen , dass wir diese Klausel zu jedem Element hinzufügen wollen, das das Ereignis auslöst. Wie fügen wir eine Klausel hinzu? Nun, es ist sehr einfach. Wir können auf unser Ziel zugreifen. Das Element, das Abweichungen auslöst. Der Dean hat ein Objekt namens Klassenliste. Object ist eine Methode namens add in. Es ist wirklich so einfach. Wir fügen nur eine Klasse zu diesem Element hinzu. Und die Klasse, die wir hinzufügen möchten, ist natürlich Highlight. Speichern wir das und gehen Sie zu unserem Browser. Das wird ein großes Problem mit dem, was wir gerade getan haben. Also lassen Sie mich zum Beispiel auf Nummer eins klicken. Änderungen, die gelesen werden sollen. Aber was ist das Problem? Kannst du hier ein großes Problem vorhersehen? Nun, das ist richtig. Wenn wir auf eine andere Zelle klicken, was passiert dann? Lassen Sie uns schreiben, dass löst gehen lesen, aber die Nummer eins ursprüngliche Zelle würde angekreuzt, ändert sich nicht. Es bleibt immer noch rot. Es gibt also ein kleines Problem mit unserem Code, das ich jetzt beheben möchte. Wir können hier zu unserem Code zurückkehren. Ich möchte das Hinzufügen einer Klasse letztes Jahr löschen und ich werde Ihnen zeigen, warum in einer Sekunde. Was ich jetzt tun möchte, ist, dass ich unsere eigene benutzerdefinierte Funktion finden wollte, und Sie werden sehen, warum ein bisschen später. Und lassen Sie uns einfach diese Funktion Highlight nennen. Und wir wollen dieses Ziel hervorheben, oder? Der nächste Schritt, den wir tun müssen, ist, dass wir eine Funktion namens Highlight definieren müssen . Und es wird einen Knoten nehmen. In diesem Fall wird es tatsächlich dieses Element nehmen, das Zielelement. Und so möchte ich, dass wir regulieren, welches Element derzeit im Vergleich zum vorherigen deklarierten angeklickt wird. Lassen Sie mich das erklären. Ganz am Anfang unseres Skripts, Lassen Sie uns einfach eine leere Variable definieren und nennen Sie diese Variable ausgewähltes Element. Und zunächst lassen Sie uns es einem Wert von null zuweisen. Was also wirklich cool ist, ist, dass wir, wenn wir mit der Ausführung dieser Highlight-Funktion beginnen, jetzt eine if-Anweisung einführen können. Und was bedeutet das, wenn Aussage enthalten wird? Nun, lassen Sie uns darüber nachdenken, was wir tun wollen, wenn wir auf eine dieser TD-Zellen klicken, wir wollen dann eine Variable definieren, die dieser Zelle zugewiesen ist. Und dann das nächste Mal einige Dinge Dan Effekt Variable hat einen Wert. Wir wollen dann ihre Klasse aus der Kopfvariable entfernen. Ich weiß, es klingt seltsam, aber du wirst sehen, wie das jetzt funktioniert. Also alles, was ich tun möchte, ist, dass wir sagen wollen, ob das ausgewählte Element nicht gleich null ist, was bedeutet, dass wir zuvor ein Element ausgewählt haben. Was wollen wir tun? Nun, wir wollen das ausgewählte Element nehmen, wir wollen auf seine Krallenlisten-Methode zugreifen. Erinnerst du dich daran? Aber diesmal wollen wir Dewey nicht hinzufügen. Wir möchten diese Klausel namens Highlights entfernen. Also, jetzt wird dies beim zuvor ausgewählten Element entfernen, das Xj irgendwie Szenen oder R macht, das ist alles gut und gut, aber jetzt, was ich tun möchte, ist, dass wir das neue Element zuweisen müssen , auf das wir geklickt haben, auf die select-Elementvariable geklickt haben. Weisen Sie das neue td-Element zu. Wir haben auf die select-Elementvariable geklickt. Und natürlich wird diese erste if-Anweisung die zuvor ausgewählten td-Elemente loswerden . Highlight Klasse, ist das eine Art Heilige zu machen? Also haben wir den vorherigen loswerden. Jetzt wollen wir, dass er das neue td-Element dieser Variablen zuweist. Also, wie machen wir das? Wir werden sehr einfach. Wir greifen auf unser ausgewähltes Element zu. Und natürlich weisen wir das dem Wert des Knotens zu. Und dann natürlich, was wir einführen wollen läuft, um auf das ausgewählte Element zuzugreifen, seine Klassenlistenmethode. Und jetzt wollen wir dem neu ausgewählten Element eine Klasse namens Highlight hinzufügen. Irgendwie ergibt Sinn. Ich hoffe es, das hoffe ich wirklich. Ich bin lustlos. Gehen Sie schnell zum Browser, sehen Sie, wie wir gehen. Lassen Sie uns die Konsole löschen und klicken Sie auf Nummer eins. Also gehen wir hin. Es ist rot. Klicken wir auf Nummer 2. Ja. Wow. Das ist erstaunlich. Richtig? Klicken Sie nochmals auf Nummer 1. Vielleicht, wenn Sie wirklich wollen, um ein echtes Oma sterner Zeug werden, werden Sie feststellen, dass das nicht ganz perfekt ist. Warum? Nun, aus ein paar Gründen. Eines ist, was passiert, wenn wir auf diese Überschrift der Tabelle klicken? Nun, der Typ, den wir sehen können, die Erwärmung der Tabelle entfernt die Farbe auf dem td Element, stellt ein Problem, richtig? Und es ist nur aktualisieren Sie das. Lasst uns auf eins klicken. Was passiert, wenn ich auf die Lücke klicke? Ja. Mit anderen Worten, die Ränder und Polsterungen zwischen sich selbst. Nun, das Gleiche wird passieren, wenn der Benutzer das versehentlich tut, die Farbe verschwindet. Und das ist nicht das, was wir wollen. Wir möchten nur, dass die Farbe verschwindet, wenn Sie auf ein anderes td-Element klicken, ein Tabellentochter-Element, Impfstoffe. Also gibt es noch etwas, was wir tun müssen, um das zu beenden und perfekt war es jetzt das Video und versuchen es herauszufinden. Das ist wirklich eine schnelle Lösung. Aber es ist ein bisschen eine Nuance. Das ist ziemlich knifflig. 24. Was ist die the: Bevor wir weitermachen, möchte ich nur etwas klarstellen, worüber Sie sich vielleicht wundern. Und das ist, was ist diese Klassenlisteneigenschaft, wenn wir existieren mussten? Nun, lassen Sie mich einfach sagen, dass die Klassenliste eine API ist, und diese API gibt eine Live-DOM-Token-Liste zurück. Und was meine ich mit einer API wird nur das Deck bleiben, wenn wir im Browser arbeiten. Der Browser selbst stellt uns viele verschiedene APIs zur Verfügung. Wir haben das schon mal durchgemacht. Eine dieser APIs ist kalt, diese Klassenliste und andere APIs Web-Sockets. Wir haben auch die Adern API, exzentrische cetera. Das ist nur einer von vielen. Und was erlaubt uns diese Klausel? Nun, es gibt uns eine einfache Möglichkeit, alle Wurfe eines bestimmten HTML-Elements zu greifen. Und ich bin sicher, Sie können schon erraten, wie nützlich das sein wird. Zum Beispiel können wir diese Eigenschaft verwenden, um CSS-Klassen für ein Element in Echtzeit hinzuzufügen, zu entfernen und umzuschalten. Und es gibt schon eine ganze Weile. In der Tat wurde es durch die HTML5-Spezifikation eingeführt. Und die wirklich coole Sache ist, dass wir viele Methoden haben, die uns auf dieser Klassenlisten-API zur Verfügung stehen. Wir haben hinzufügen, entfernen enthält insgesamt Artikel Links zu String und Wert. Wir werden nicht alle diese im Kurs verwenden, aber wir werden die beliebtesten verwenden. Wir werden hinzufügen, entfernen und sogar umschalten. Dieses EKG macht Szenen. Sie fragen sich vielleicht, was ist das DOM-Token Listen? Worum geht es denn da? Nun, das gibt eine Trommelrolle zurück. Ziemlich offensichtliche Routen. Ich bin sicher, dass du das erraten hast. Es ist eine besondere Art von Liste. Und es ist eine Liste, die uns alle Methoden gibt, die wir gerade in der vorherigen Folie gesehen haben. Denken Sie daran, Hinzufügen, Entfernen, Umschalten, et cetera, et cetera. Und Sie werden wahrscheinlich nur mit dieser Klassenlisten-API auf die DOM-Token Liste stoßen. Also gehen wir hin. Ich wollte Ihnen nur schnell einen Überblick darüber geben, was die Klausel aufgelistete Eigenschaft war. Ich hoffe, du lernst eine Tonne und ich sehe dich in der nächsten Herausforderung. 25. Box – Vervollkommnen deiner Lösung: Hast du es herausgefunden? Mach dir keine Sorgen, wenn du es nicht tust. Das ist nicht wichtig. Das Wichtigste ist, dass du darüber nachgedacht hast und es ausprobiert hast. Gehen wir hier zu unserem Texteditor. Und wie können wir damit umgehen? Nun, wir müssen zurück zur Quelle. Erinnern Sie sich an die Highlight-Funktion, wir wollen nur, dass dies geschieht. Was wir angeklickt haben, ist ein TD-Element. Alles andere. Wir wollen eigentlich, dass nichts passiert. Wenn der Benutzer geht und auf das Schlagen des Tisches klickt, wollen wir nichts passieren. Also wissen wir aus diesem Grund, wir müssen irgendwie einen Gatekeeper haben, Netz-Gatekeeper kann diese allererste Funktion sein, diese ChangeColor-Funktion. Was wir also nicht tun wollen, ist diese Highlight-Zielfunktion sofort aufzurufen. Wir brauchen eine if-Aussage. Keine Sorge. Beginnen wir mit einer if-Anweisung. Und wenn Sie nicht sicher sind, wie die if-Anweisung funktioniert, schauen Sie sich bitte meinen JavaScript kompletten Großmeister-Kurs an. Es ist wirklich genial. Aber wie auch immer, für diejenigen von Ihnen verstehen, was es ist, großartig, werden Sie in der Lage sein, mitzuverfolgen. Was ist das erste, was wir dafür testen können? Wieder, die vielen Möglichkeiten, um eine Katze Haut, wenn es um die Programmierung geht. Dies betrifft nur die Situation, in der das Zielelement mit Tiktok nicht dem td-Element entspricht. Was wir dann sagen können, ist, dass der Ziel-Tag-Name, richtig, nicht gleich TD ist. In diesem Fall. Wir wollen nichts tun. Und wir können einfach eine return-Anweisung ausführen, die in der Tat den JavaScript-Parser anweist, dieses Ganze zu beenden, wenn die Ausführung. Das ist alles, was wir tun. Aber dann wollen wir uns natürlich mit der Situation auseinandersetzen. Der Tag-Name ist Td. Also der Mittelwert für die einfache else-Anweisung. Und natürlich wissen wir hier, dass das Element, auf das wir geklickt haben, ein TD-Element ist. Und in diesem Fall bist du 100 Prozent, richtig. Hier wollen wir eine Highlight-Funktion ausführen und das Ziel als Argument übergeben. Crew, wir haben eine unglaubliche Menge geleistet oder hoffen, dass alles Sinn ergibt. Gehen wir zurück zu unserem Browser. Löschen Sie die Konsole, Lassen Sie uns auf eine klicken. Klicken Sie einfach auf fünf, lassen Sie alles arbeiten. Klicken wir nun auf die Kopfzeile. Nichts passiert. Lassen Sie uns zwischen diesen Zellen klicken. Nichts passiert. Also haben wir buchstäblich einen perfekten kleinen Tisch. Wie genial das Ende, um Herbie Spaß zu haben. Ich hoffe, Sie haben in diesem Vortrag viel gelernt. Und wenn wir zurück zum Code gehen, ja, nehmen Sie sich einfach Zeit, gehen Sie durch, verstehen Sie Schritt für Schritt, was wir sehr schnell gemacht haben. Alles, was wir getan haben, ist, dass wir unseren HTML ganz oben definiert haben. Wir waren in der Datei styles.css, welche Stile ich sehr schön abdecken werde. Und dann unten haben wir unser JavaScript alles in einem Skript-Tag eingeschlossen. Und innerhalb des Skript-Tags haben wir begonnen, indem wir eine Variable namens ausgewähltes Element definieren. Und denken Sie daran, warum wir das getan haben. Wir haben dies getan, damit wir verfolgen können , welches Element mit aktuell ausgewählt auf und wenn wir ein neues Element auswählen, gingen wir, um diese Klausel von Highlights auf dem vorherigen Element entfernen wir ausgewählt. Warum? Zunächst definieren wir nur eine leere Variable. Und diese variable Art von hilft uns, zu verfolgen, welches Element derzeit ausgewählt ist. Innerhalb unserer Tabelle fügen wir einen Ereignis-Listener zu dieser Tabelle hinzu und wir verwenden Ereignis-Bubbling, wenn ein Klick-Ereignis in diese Tabelle geblasen wird, wird diese ChangeColor-Funktion ausgeführt. Wir prüfen, ob das Zielelement, das Element, das das click-Ereignis ausgelöst hat. Wir prüfen, ob es sich um ein TD-Element handelt. Und wenn dies der Fall ist, führen wir eine Funktion namens Funktion Hervorhebung überprüft das ausgewählte Element. Und wenn es nicht null ist, entfernt es diesen Klassennamen. Und danach, wenn Anweisung innerhalb ausgeführt wird weisen Sie den neuen Knoten mit geklickt auf das ausgewählte Element, und dann fügen wir eine Klasse von Highlight hinzu. Heute haben wir es ernst Walden, du bist so weit gekommen, du hast so gut gemacht. Und jetzt möchte ich, dass du dich bei ein paar Herausforderungen ausprobierst. Ich denke, Sie ja, ich denke, an diesem Punkt gerade jetzt, Sie haben eine unglaubliche Menge ernsthaft getan, glückliche Notwendigkeit auch feiern diese Dinge. Tut mir leid, ich hole die Musik raus. Und tanzen Sie wenig. Entspannen Sie sich und genießen Sie. Schnapp dir einen Kaffee. Und wir sehen uns in der nächsten Vorlesung. 26. Quote – Intro: Willkommen zu einer weiteren Herausforderung. Ich hoffe, du hast Spaß. In der Tat liebe ich diese Dinge und ich liebe es, sie zusammenzustellen und sie mit dir durchzugehen, ist wirklich faszinierend. Ich genieße es einfach, aber genug, Blubber, Blubber. Worum geht es bei dieser Herausforderung? Nun, ich bin sicher, Sie können es wahrscheinlich erraten, aber hier haben wir drei allgemeine Zitate in ihrem eigenen Blog. Und wenn du auf das kleine x in der rechten Ecke klickst, was passiert? Das ist richtig. Sie ist verschwunden. Es entfernt es vollständig. Es ist dann vernichten. Wie auch immer, Sie bekommen den Punkt, wenn der Benutzer darauf klickt. Dass ganze Zitate verschwinden sollten. Bild nur aktualisiert würde, wenn der Benutzer auf das tatsächliche Angebot klickt, nichts sollte dort passieren. Nur, wenn der Benutzer auf diese Schaltfläche klickt. sich nur uralt ausgedacht. Also gib es mal los. In der nächsten Vorlesung werde ich den HTML-Code mit Ihnen programmieren. Wenn Sie HTML nicht codieren möchten, ist das in Ordnung. Ich habe die Datei nicht erstellt, aber ernsthaft, es ist der beste Weg, um zu lernen. Also unabhängig davon, ob Sie den HTML mit mir codieren und ich werde Sie im Lösungsvideo sehen, wo wir das JavaScript codieren, das DOM manipulieren, Ereignisdelegierung Rest auf Wissen über Bubbling verwenden. Wir wollen nicht Ereignis-Listener auf jeden dieser Punkte setzen. Wir wollen es auf die Elemente eines Elternteils setzen. Okay, also bedenken Sie das einfach. Wie auch immer, genießen Sie einen Kaffee, und wir sehen uns in der nächsten Vorlesung. 27. Quote – Erstelle unseren HTML: Ehrfürchtig. Wir sind in die nächste Herausforderung geraten. Und wie immer funktioniert das Know-how, wenn ich das HTML mit dir schreibe , weil ich denke, dass es eine Basis ist, um so zu lernen. tue ich wirklich und ich ermutige Sie, mitzumachen. Aber wenn du nicht mitverfolgen willst und du wirklich ein Monster bei HTML und all diesen Dingen bist. Keine Panik. Ich habe in dieser Vorlesung einen Link zum HTML eingefügt. So können Sie einfach von dort abholen. Aber wenn Sie neben mir Code kamen, großartig, Lassen Sie uns jetzt in sie kommen, können Sie auf meinen leeren Visual Studio-Code und den Browser auf die Rechte sehen . Und alles, was ich habe, sind zwei Dateien, eine Indexdatei und eine Stile. Das war's. Wo fangen wir an? Wie immer möchte ich mit einer einfachen HTML-Datei beginnen. Und bevor wir das vergessen, fügen Sie einfach unser Stylesheet hinzu. Sofort. Da gehen wir. Ich werde Stylesheet ist alles verbunden und sie beginnen, Körper zu verrotten. Erinnerst du dich, was wir versucht haben? Wir versuchen, unser Wissen über Bubbling zu nutzen. Okay, also möchte ich den gesamten Code einschließen, es eine Delegation nennen, Lassen Sie uns ein div mit der ID der Delegation in dieser div Delegierungsbox erstellen, alles umfasst eine, die übergeordnete Entwicklung. Ich möchte Off-Zitate haben und jedes Zitat sieht gleich aus. Denken Sie daran, dass wir eine Überschrift haben, wir haben einen bestimmten Hintergrund gekauft. Wir haben die obere Grenze. Und weil sie sich wiederholend sind, sollten wir eine Klausel erstellen und jeden Hafen in einer anderen Entwicklung mit einer bestimmten Klausel mieten . Lassen Sie uns also ein div erstellen und eine Klasse von Box haben , weil das ist, was wir tun. Wir setzen jedes Zitat in eine eigene Box. Erinnern Sie sich an diesem Punkt, was wir getan haben. Wir haben unsere Box und in jeder Box wollen wir Zitate und erinnern, was jeder ganz Kopf. Also eine einfache, es hatte eine Überschrift und dann musste es tatsächlich dauert. Und dann haben wir natürlich den Schließknopf oben rechts. Also zuerst, lasst uns das nur zu einem H3-Tag machen, weil ich es nicht so groß will. Und Schlagen kann kalt auf einer Hüfte, Hüfte, Hüfte sein. Los geht's. Und sie müssen möglicherweise das eigentliche Beenden tun tun. Das Zitat kann also nur in einem normalen Absatz-Tag sein. Wir haben unseren Absatz und anstatt es aus nur Zeit zu tippen, habe ich tatsächlich alle Zitate und andere Bildschirme gespeichert lecker kopieren und einfügen. Ja. Diese sind ganz wie ein Nilpferd. Ein Nilpferd oder einfach nur eine wirklich cool up optimieren. Für einen brillanten, brillanten, das ist ein typischer Dad Witz, nicht wahr? Wie auch immer, wir haben unsere Überschrift, wir haben uns erworben, und dann brauchen wir den Schließknopf. möchte nicht, dass Sie ein Button-Tag mit einer Klasse von bösartigen cool erstellen, es entfernt. Und wir wollen nur kleine XD einbeziehen. Wir wissen also, dass das ein Knopf ist. Wir klicken auf diesen Button und wir wollten uns bewegen. Mach dir keine Sorgen um das Styling. Jetzt werden wir in unserem Stylesheet darauf eingehen. Dies ist nur das HTML sitzen. Also gehen wir hin. Idee ist Angebot Zitat, alles, was wir jetzt tun müssen, ist Kopie. Dies fliegt direkt Speichern und sie sind alle Anfragen. Wie jemand das war, ändert sich das einfach. Natürlich, jede dieser Überschriften, kann dieses Schlagen kalt sein. Geht weiter. Und lassen Sie mich den Text auf meinem anderen Bildschirm greifen. Ja, Eigenkapital. Und dieses Zitat stammt von Winston Churchill. Und dann endlich, lasst uns auf die verlorene gehen. Und wir können sagen, achten Sie darauf. Auch hier, lassen Sie mich einfach kopieren und fügen Sie dies von meinem anderen Bildschirm hier ein, nur um uns Zeit zu sparen. Da gehen wir. Coole Hackles das. Das sind also HTML. Das letzte, was ich tun will, um nur nach oben scrollen hier ist würzen dies ein wenig durch die Anwendung cool stilistisch getan wurde Talk Stylesheets und macht Gedanken jazzing diese up. Das erste, was ich tun möchte, ist auf einem greifen unseren Körper, okay, und ich möchte alles auf Next stylen, und lassen Sie uns zuerst mit Marge umgehen. Nehmen wir einfach an, wir wollen einen Rand von 10 Pixeln und wir wollen, dass alles in der Mitte ausgerichtet ist. Wir können dann eine Breite von 450 Pixeln definieren. Wie sieht das aus? Und gut aussehen Dürren heilig. Es hat eine Massenbreite für uns. Und dann sind die Schriftarten nur durchschnittlich. Also lasst uns einfach Font-Familie setzen. Koreanische Einheit. Das macht Spaß. David, das sieht ziemlich cool aus. Es sieht so aus, als wäre es ein richtiges Zitat. Stats up Kumpel, sie fangen jetzt an, spezifischer zu werden. Und hören wir auf, ganz oben zu arbeiten. Lassen Sie uns mit unserem h3-Tag sprechen. Die, lasst uns einfach den Rand loswerden. Und wir können ein bisschen Polsterung an der Unterseite haben. Das ist also gut. Polsterung unten Ich weiß es nicht. 0,3 m LKW Ja, das ist okay. So ist H3. Jetzt möchte ich anfangen, mit unserem Absatz zu arbeiten. Lassen Sie uns aufstehen Eltern oder wieder aus, diese entfernen Marge. Und wieder möchte ich den Polsterboden oder die Polsterung unten beeinflussen. Und Unbekannte. 0,5 Ziel etwas mehr, vielleicht 0,8 zu ihm. Ich finde, das sieht gut aus. Lassen Sie uns H3 und unser Absatz. Das nächste, was ich stylen möchte, ist dieser Entfernen-Button. Sollen wir das tun? Eigentlich wissen Sie was, bevor ich den Entfernen-Button mache, lassen Sie mich tatsächlich eine Box stylen, denn dann werden Sie irgendwie sehen , wie wir diesen Knopf positionieren oder leichter zu sehen sind. Also alles, was wir tun wollen, ist, dass wir den Klassennamen der Box greifen wollen. Denken Sie daran, ja, wir können eine Hintergrundfarbe davon anwenden, sagen Sie einfach lila, aber ich werde es jetzt ändern. Also lassen Sie uns einfach darüber schweben. Das ist wirklich etwas Cooles an dem Texteditor. Und wir können es literarisch so gestalten, wie wir wollen. Wie sieht das aus? Lassen Sie uns rosa setzen, nicht wahr? Vielleicht sollten wir es tun, weißt du, ich kann es mir eine schöne blaue Farbe machen. Wie ist das? Ja, das ist cool. Das gefällt mir. Und wir machen es etwas transparenter. Da gehst du. Das gefällt mir. Lassen Sie uns etwas Polsterung hinzufügen. Ja, es sieht besser aus. Und es fängt schon an, cool aussehen mit gerade jetzt können Sie sehen, dass man lügt unzitiert wirft es in die andere. Also lassen Sie uns einfach trennen, indem wir wirklich coole Grenze haben. In der Tat möchte ich nur ein Brett oben haben, damit wir an der Grenze oben gehen können. Zwei Pixel, einfarbig blau. Wie sieht das aus? Ja, ich bin die Netbooks oder wenigstens kannst du jetzt ein Zitat vom anderen unterscheiden. Und jetzt will ich das Letzte, was ich tun will, ist einfach nach unten zu scrollen. Ja, aber da ich diesen Schließknopf stylen wollte, haben wir ihm eine Klasse von Entfernen gegeben. Denken Sie daran, dass, wenn ich unsere HTML-Datei und wir scrollen zu jeder dieser Schaltflächen, können Sie sehen, jede Schaltfläche hat eine Klausel oder entfernen. Das ist es, was wir hier tun. Wir werden das IT-Personal zuerst gefälscht haben, ich möchte, dass die Position eine absolute Position ist, denn denken Sie daran, wir wollen dies an die obersten Rechte jedes Zitats setzen, aka jedes div mit einer Klasse von Box. Daher wollen wir, dass seine Position eine absolute Position ist. Aber wir werden ein kleines Problem damit haben, das ich dir jetzt zeige. Wir haben also eine absolute Position, die jetzt cool ist, müssen wir sie bewegen, wenn wir ihre obere Positionierung auf 0 beeinflussen, Sie können sehen, dass sie übereinander stapeln. Obwohl wir also eine absolute Positionierung sein wollten, wollen wir, dass sie immer relativ zu seinem Elternteil ist. Und das Eltern-Div ist dieses Boston. Und um das zu tun, müssen wir in diese Box gehen und dann die Box Zeug, können wir eine Position von relativ haben. Da gehen wir. Jetzt wird jede Entfernen-Schaltfläche relativ zum übergeordneten Element positioniert. Macht das irgendwie Sinn? Deshalb haben wir das getan, weißt du, es sollten wir einen Kommentar haben. Ja. Und der Kommentar kann sein, dass wir wollen, dass jede Schaltfläche relativ zu seinem Elternteil platziert wird. Deswegen machen wir das. Also gehen wir hin. Das macht eine Menge Szenen. Und natürlich wollen wir den Knopf nach rechts drücken. In der Tat können wir vielleicht ein Team Pixel von rechts haben. Wie sieht das aus? Fangen an, gut auszusehen, oder? Was können wir sonst noch tun? Wir können die Grenze entfernen. Ok. Also grenzt keiner an. Wie sieht das aus? Ja, mein Name sucht. Ok. Was können wir sonst noch tun? Wir können einen Hintergrund hinzufügen. Lasst uns transparent haben. Wir wollen nicht, dass das Grau nicht schön aussieht. Ihr Jungs fängt an, bessere Hand auszusehen, die Farbe kann natürlich dunkelrot sein. Wie ein Uhr. Es ist besser. Die andere Sache, die wir tun können, ist, dass Sie sehen, ob wir mit der Maus über bewegen, ändert nicht das lustige Handsymbol. Also natürlich, was wir tun können, ist, dass wir seine Cursoreigenschaft beeinflussen und machen können, dass ein Zeiger jetzt ist, wenn wir über diese kleine Hand schweben und es ein bisschen klein ist. Also lass es uns ein bisschen größer machen. Schriftgröße. Machen wir es ein m , das ist ein bisschen besser, und ich denke, das ist in Ordnung. Ich finde, das sieht toll aus. Offensichtlich können wir viel mehr Zeit damit verbringen, es schöner zu machen. Aber für die Zwecke dieser Vorlesung haben wir genug getan. Wir haben unsere drei Zitate. Und natürlich denke ich offensichtlich, was ich will, dass Sie versuchen und tun. Wenn Sie darauf klicken, um die Schließen-Schaltfläche zu überqueren. Ich möchte, dass das Zitat verschwindet. Also haben wir unseren HTML. Weißt du noch, was wir getan haben? Wir haben ein gesamtes div-Element definiert, ein aktives Element. Wir werden Fäulnis verwenden, weil wir von plappern gelernt haben. Und das wird derjenige sein, der auf unsere klebrigen Adern auf diesem schließenden Knopf hört. Macht das Sinn? Cool, also gib es mal. Und in der nächsten Vorlesung werde ich die Lösung mit Ihnen programmieren. Umarmt Spaß zu haben, sagen Ende. Und wir sehen uns in der nächsten Vorlesung. 28. Quote – Lösung: Woo Hoo. Ich hoffe, du hattest Spaß und ich hoffe, du lernst und ich hoffe er hat es ausprobiert, denn das ist das Wichtigste. Aber ja, wir wissen alle gut, ich möchte jetzt unsere JavaScripts hinzufügen, diesen Ereignis-Listener hinzufügen, und ich möchte, dass wir Ereignis-Bubbling verwenden. Lassen Sie mich erweitern Takes Editor jetzt. Und das fängt an, unser Skript-Tag zu verwerfen. Sie werden erstaunt sein, wie einfach die Lösung ist, übrigens, ist wirklich nicht so schwierig? Was ist das Erste, was wir tun müssen? Nun, lass uns rocken. Wir wollen unseren Event-Hörer an etwas anhängen, oder? wir also verspätete Delegation. Der dem Wert unseres tatsächlichen div mit der ID der Delegation zugewiesene Wert, denn das ist derjenige, den wir hören wollten, worauf ich achte, richtig. Wir wollen keine Ohnmacht Distributionsbox anbringen, die zu umständlich und ihre Leistung ineffizient ist . Wir wollen wahre Großmeister Codierung Domain sein. Also beginnen wir mit unserem Dokumentobjekt. Auf diesem Dokumentobjekt wissen wir das bereits. Es gibt eine Methode namens get element nach ID. Und natürlich ist die ID, die wir FH wollen, Delegation. Ich denke, so nennen wir es ID-Delegation. Und das stimmt. Also gehen wir hin. Das ist der erste Schritt. Der zweite Schritt ist, dass wir unseren Event-Listener anhängen wollen. Also haben wir aus der Delegation geholt. Wir existieren jetzt eine Methode direkt auf diesem Add Event Listener genannt. Wir wollen Vollklick-Events hören. Und wenn sie klicken Ereignis ausgelöst wird, wollen wir unseren Handler ausführen und der Handler aus Mangel an einem besseren Wort entfernt. Natürlich müssen wir jetzt unsere Funktion definieren, die wir entfernt benannt haben. Und jetzt denkst du vielleicht, dass es schwierig ist, aber es ist nicht so schwierig. Was machen wir jetzt? Wird eine Menge Codierung kommt durch Versuch und Irrtum. Was ich also tun kann, ist, dass ich etwas programmieren kann, das nicht ganz funktioniert hat, aber es wird uns auf halbem Weg bringen. Das erste, was wir tun wollen, ist, dass wir auf die Venenziele zugreifen wollen, oder? Wir wollen herausfinden, wie diese Veranstaltung kommt. Und dazu müssen wir auf das eigentliche Ereignisobjekt zugreifen, das uns in dieser Callback-Funktion gegeben wird. Wie machen wir das? Nun, wie Sie jetzt wissen, setzen wir es in eine Variable und wir nennen es typischerweise Variable e. Und um auf unsere Ziele zugreifen zu können, können wir einfach eine Variable namens target definieren, und wir greifen auf unser Ereignisobjekt zu und wir erhalten eine Eigenschaft namens Ziel darauf. Das wissen wir. Nun wollen wir nicht nur das eigentliche Ziel entfernen, sondern auch den übergeordneten Knoten, das übergeordnete Element, entfernen. Weißt du noch, wie wir unseren Code strukturiert haben? Lassen Sie mich einfach hier nach oben scrollen. Jedes Zitat als zerstört und was? Es ist richtig. Es ist in ein eigenes div-Element mit einer Klasse von Fehlern eingewickelt. Also könnten wir sagen, wenn wir in ein Zitat klicken, wollen wir seine übergeordneten Elemente entfernen. Und natürlich, wenn Sie sein eigenes übergeordnetes Element entfernen, entfernt das auch alle untergeordneten Elemente. Damit denken Sie vielleicht, dass Clive am einfachsten ist, diese Zielachse, sein übergeordnetes Element über die übergeordnete Elementmethode, zu greifen . In DOM Pot einer der Serie gehen wir in viele Details in übergeordnete Elemente und wie man das DOM durchquert. Dies ist spezifisch für einen Grund, warum es sehr nützlich wird. Und darauf möchten wir auf eine Methode namens remove zugreifen. Also speichern wir das und gehen Sie zu unserem Browser. Lassen Sie uns unseren Browser erweitern. Und jetzt lasst uns auf Weiter klicken. Oh Mann, es wurde entfernt, aber es sollte nicht richtig sein? Weil wir es nur entfernen sollten, wenn wir darauf klicken. Okay, also ist es irgendwie Hoff, und das habe ich schon gesagt, als du versuchen könntest, es zu versuchen. Und wie Sie sehen werden, wissen Sie, dass wir unseren Code weiter verbessern können, während wir weitergehen. Sehen Sie mich die Seite aktualisieren und es ist zurück zu unserem Texteditor. Also, wie gehen wir damit um, dass wir nur das übergeordnete Element entfernen möchten , wenn das kleine schmerzt, die Schließen-Schaltfläche angeklickt wird. Eine Möglichkeit, dass wir es tun können, ist die if-Anweisung zu verwenden. Und die vielen Möglichkeiten, wie wir die if-Anweisung auch nutzen können. Ich werde nur damit beginnen, zu sagen, ob das Ziel, erinnere dich daran, dass das Ziel die Sache ist, dieses Element, das das Tick-Ereignis ausgelöst hat. Wenn dieses Ziel, wenn sein Klassenname ist nicht gleich zu entfernen. Denken Sie daran, weil alle unsere Tasten eine Klasse von entfernt haben. Wenn dieses Element, das wir angekreuzt haben, nicht die Klasse der Entfernung hat. Wir wissen, dass es nicht der Taktstock ist. Also in diesem Fall wollen wir nichts tun. Wir wollen nur aus dieser if-Anweisung beenden. Sonst. Dies ist der Cache-Block Code. Wir wissen, dass das Element, das wir angekreuzt haben, einen Klassennamen von remove hat, in diesem Fall bedeutet das, dass es die Schaltfläche ist. In diesem Fall möchten wir die remove-Methode für sein übergeordnetes Element ausführen. Macht das Sinn? Ich hoffe es. Lassen Sie uns auffrischen. Und jetzt, wenn ich auf eine klicke, traf alle Zitate, nichts passiert. Aber wenn wir den Mauszeiger über einen dieser Fluss-Schaltflächen bewegen und wir darauf klicken, ist es weg. Wie genial. Also gehen wir hin. Ich hoffe, du hast eine Menge Spaß, unglücklich, mir zu folgen. Ich hoffe, Sie verstehen, wie wir den Code aufsetzen und wie wir die Wesen Delegation über Bubbling nutzen. Es ist wirklich interessant und du wirst ein Meister bei diesem banalen. Während das 29. List – Einleitung: Ich liebe dieses Zeug ernst, so viel Spaß. Und deshalb stelle ich immer wieder Herausforderungen und Praxisbeispiele. Ich genieße es und sei, ich denke, du würdest Tonnen davon rausholen. Denken Sie daran, dass dieser Kurs Sie dazu befähigt, zu lernen, wie Sie effizient codieren und diese Gesetze. Wenige Herausforderungen, einschließlich dieser, ist die Verwendung des Konzepts der Veranstaltung sprudeln. Und das tun wir durch Event-Delegation. Erinnern Sie sich an eine Venendelegation und sogar sprudelnde Arbeit Hand in Hand. Sie sind sehr eng verwandt. Und je mehr du das praktizierst, desto mehr wirst du bei Coda werden. Aber wie auch immer, genug davon, worum geht es bei dieser Herausforderung? Nun, wie Sie sehen können, haben wir sehr einfach aussehenden Text auf dem Bildschirm, HTML. Und ich wollte absichtlich nicht viel Thomas CSAs ausgeben. Ich wollte nur, dass Sie dieses Konzept lernen, und dann gehen wir weiter, wie ich bin sicher, dass Sie vielleicht schon erraten können. Alles, was wir tun wollen, sammelt Gegenstände und scharfe Gegenstände, wenn Sie darauf klicken. Wenn wir rotes Fleisch anziehen, ist das weg. Wenn wir auf andere klicken, ist das weg. Wenn wir auf Gemüse klicken, die gesamte Liste verschwunden. Für klicken Sie wieder darauf, es erscheint. Wenn wir auf yucky diejenigen bei Zusammenbrüchen klicken, wenn wir auf trifft klicken, dass zusammenbricht. Also, da gehst du hin. Ich denke, du verstehst den Punkt. Und denken Sie daran, dass wir die Ereignisdelegierung nutzen wollen. Stellen Sie also sicher, dass Sie alles in einem Element lesen und auf ein Klick-Ereignis auf diesem Element hören , weil Sie wissen, dass es aufblasen wird. Also gib es mal los. Ich hoffe, du hast Spaß. Bleiben Sie motiviert und wir sehen uns in der nächsten Vorlesung. 30. List-5-5-: Oder seltsam. Also werde ich aufhören, sehr schnell durch das zu gehen, weil du gut wirst. Lassen Sie uns also anfangen, unser HTML schnell und effizient zu erstellen. Los geht's. Wir haben unseren Körper. Was ich tun will, nun, wir müssen oder ihre Listen-Tags verrotten und ich weiß, es wird ein bisschen umständlich aussehen, aber wir kommen zusammen. Also lasst uns knacken. Denken Sie daran, wir wollen Ereignis-Bubbling nutzen. Und um das zu tun, müssen wir eine Art übergeordneter Elemente erstellen, die alle Ereignisse erfasst. Also lasst uns das machen. Wir können es das UL-Tag nennen und das kann eine ID von Lebensmitteln haben. Und wie wir wissen, müssen alle ungeordneten Listen ein Listenelement darin haben. Also werde ich die erste Liste Artikel kann Fleisch sein. Und ich werde zweite Liste Artikel kann unter kein Gemüse sein. Da gehen wir. Und wenn wir das speichern und auf unserer Seite aktualisieren, können wir sehen, dass wir Fleisch und Gemüse haben. Ziemlich einfach. Denken Sie daran, wir wollten eine ganze Art Baumstruktur von Listen und all das erstellen. Also innerhalb dieser trifft eine Lüge, ich möchte tatsächlich eine andere ungeordnete Liste erstellen. Und denken Sie daran, dass sie erreichen wollten, brechen Sie es noch weiter in nennen es rotes Fleisch und andere. Um dies zu tun, können wir einfach ein anderes Listenelement erstellen. Dies kann rotes Fleisch sein. Und natürlich können wir hier einen sagen, das zu retten, und wir können aufhören. Wir können sehen, dass es voll nimmt und Gestalt annimmt und was kommt als nächstes? Nun, denken Sie daran, dass, wenn ein Benutzer auf Rate klickt und isst, wir wollen, dass eine andere Anti und weniger Struktur angezeigt wird. Also innerhalb der Liste trifft wir wollen ein weiteres UL-Tag und wir können alla haben, Liste Artikel von rotem Fleisch. So können wir Rindfleisch, Lamm und POLQA schreiben. Sieht das jetzt Sie gehen und wir wollen so ziemlich genau das gleiche für andere tun. Wir gingen zu einer ungeordneten Liste und innerhalb dieser haben wir drei Listenelemente gewonnen. Entweder kann Fisch sein, Huhn, und sagen wir Türkei. Cool, ich weiß, es wird irgendwie seltsam Draw Timing, all diese ungeordneten Listen und Listen. Aber lassen Sie uns weitermachen. Wir werden fast, fast fertig. Wir können das Gleiche mit Basiswerkzeugen machen. Bleiben Sie unter dem Gesicht zu Maulwürfen. Wir wollen auch Unterüberschriften. Wir können eine ungeordnete Liste haben und die beiden Unterüberschriften, die wir wollen leckere und wir können die Glücklichen haben. Und das sind übrigens nur nach Hamline Meinung, welche lecker sind und welche Tanten in lecker, natürlich brauchen wir ein weiteres UL-Tag und die, wir können unsere tatsächlichen Listenelemente haben. Nun, was sind wirklich leckeres Gemüse? Werde ich Kartoffeln lieben? Und ich liebe Spargel. Was sonst noch? Erzählen Sie eine Lüge. Ich mag Erbsen. Jetzt ist es Zeit, Gestalt anzunehmen. Und dann wollen wir natürlich genau das Gleiche machen. Wir wollen eine ungeordnete Liste mit Listenelementen unter jedem. Erstens mag ich Brussel Sprossen nicht wirklich, obwohl ich mit einem geformten war. Und er machte den köstlichsten Prozess. Und die hatte ich nicht wieder. Also werde ich nur Rosenkohl setzen. Nein, danke. Setzen Sie einfach zwei andere. Lasst uns Grünkohl nur um Streit willen setzen. Und ich mag Pilze aus irgendeinem Grund nicht. Pilz ist verfügbar. Nicht sicher. Es ist einfach hier. Also gehen wir hin. Hier ist unser allgemeines Setup. Wir haben unsere Listenartikel, wir haben unsere Listen. Ich werde ungeordnete Listen. Und wir haben unser ultimatives UL-Tag mit einer ID von Lebensmitteln. Und es wird sein, was auf all unsere WikiLeaks hört. Da gehen wir. Atmen Sie tief durch. Wir haben unser HTML gemacht. Aber jetzt, wenn wir auf all diese klicken, passiert nichts. Was ich möchte, dass du darüber nachdenkst, wie würdest du es sammeln? Es ist ein ziemlich kniffliger. Ich möchte nicht, dass Sie sich um das Styling dieser Listenelemente in einer ungeordneten Liste kümmern . Mach dir deswegen keine Sorgen. Denken Sie darüber nach, was es ist, wir versuchen zu lernen, welche unter gelernt über Event Bubbling, Event Delegation und wie wir mit diesen Konzepten arbeiten können Es ist sehr coole Effekte zu schaffen und eine bessere Benutzererfahrung zu schaffen. Also denken Sie nach, viel Spaß. Und im nächsten Bild wird die Lösung zusammen schneiden. Sehen wir uns jetzt an. 31. List – Lösung: Wen hast du es ausgesucht? Ich hoffe es. Aber wie auch immer, hier sind wir. Ich werde dich nicht behalten. Ich werde die Lösung nur sehr, sehr schnell durchgehen und jeden Schritt auf dem Weg erklären. Also, wie machen wir das? Es kann ein bisschen schwierig sein, aber Sie wissen, wie es geht, es wird Sie überraschen, wie einfach die Lösung wirklich ist. Sehen Sie mich hier nach unten scrollen. Der erste Schritt ist natürlich, dass wir unser Skript-Tag einschließen müssen. Wir bemerken, und wir wollen Event Bubbling und sogar Delegation nutzen. Und das bedeutet, dass wir unsere Adern auf einem bestimmten Abschnitt und auf unserer Seite hören wollen. Aber wir wollen dieses Ereignis von einem Element hören, oder? Weil wir es gegen Babylon wissen. Und genau deshalb haben wir alles in dieses ungeordnete Listenelement mit einer ID des Essens eingewickelt . Der erste Schritt ist, wie Sie es erraten haben, müssen wir auf diesen ganzen Gegenstand zugreifen. Und wir tun dies, indem wir Dokument get Element für ID verwenden, die wir eine ID des Essens gegeben haben. Und wie Sie sicher schon erraten haben, besteht der nächste Schritt darin, auf diese Variable zuzugreifen, die wir gerade erstellt haben. Wir wollen dann eine Methode darauf namens addEventListener ausführen. Wir hören auf ein Klick-Event, richtig? Und wenn das Ereignis gefeuert wird, was wollen wir tun? Nun, wir wollen entweder etwas Fäule zeigen oder verstecken. Also, um zu tanzen, handout und nennen wir es zeigen oder verstecken. Und der letzte Schritt ist, diese Handler-Funktion zu definieren. Wir tun dies mit JavaScript-Funktion Schlüsselwort, und wir haben es Show Hide genannt. Und los geht's. Das Fleisch und die Herzen unseres Kodex sind in dieser Funktion. Okay, was wollen wir also passieren? Scrollen wir nach oben und Nakoda. Werfen wir einen Blick auf dieses Fleisch würde, wenn wir auf trifft klicken, was passiert. Wir werfen einen Blick auf seine Umgebung. Wir wissen, und wenn ich klicke auf trifft, so gingen wir stattdessen rotes Fleisch und andere zu kollabieren. Lesen Sie nicht. Das erste, was ich bemerken kann, obwohl, Dieses Treffen ist auf einem LI-Tag. Sagt das Erste. Die zweite Sache ist, ja, wir können jeden dieser Verbündeten darunter zusammenbrechen, aber es ist effizienter, das UL-Tag einfach zu kollabieren, wird das UL-Element innerhalb dieses LI-Tags? Weil ich Sinn erhalte. Okay, cool. Was mit rotem Fleisch lesen wird, trifft uns dasselbe, wenn wir darauf klicken und bemerken, dass es auf einem Verbündeten Tag steht und dass wir einfach das UL-Element darunter zusammenbrechen können. Und wenn Sie nach unten scrollen, werden Sie feststellen, dass jedes andere Element auf die gleiche Weise funktioniert und sich auf einem Verbündet-Tag befinden muss. Und dann müssen wir seine Elemente darunter finden und das dann verbergen. Also, wie machen wir das? Nun, du wirst sehen, dass es nicht so schwierig ist. Das erste, was ist immer, wir müssen das Ziel zu bekommen, wir müssen die automatische bekommen sollte das Ereignis auslösen. Also lassen Sie uns eine Variable namens Ziel definieren. Lassen Sie uns auf unser Event-Objekt zugreifen. Und denken Sie daran, dass wir dies tun, indem wir es in eine Variable namens e und es hat eine Eigenschaft namens Toleranz. Also gehen wir hin. Wir haben unser Venenziel. Der erste Scheck, den ich machen will, ist, dass ich überprüfen will, ob es eine Verbündete ist. Und wir haben das schon mal getan, damit Sie wissen, wie es geht, aber wir können auf unser Ziel zugreifen. Es verfügt über eine Tag-Name-Eigenschaft. Und wir wollen, dass der Tag-Name ein Verbündet-Tag ist, richtig? Und wenn das passiert, wissen wir, dass wir unsere Handler-Funktion Qu ausführen können. Und was soll unsere Handler-Funktion tun? Nun, denken Sie daran, dass unsere Handler-Funktion Ihnen unser Element verbirgt oder zeigt. Also lassen Sie uns eine andere Variable definieren und nennen wir, dass die UL, setzen Sie die URL, die wir entweder ein- oder ausblenden möchten. Oh, es ist schrecklicher Name, aber es ist genau das, woran ich jetzt dachte. Und lassen Sie uns das jetzt zwei zuweisen. Welchen Wert? Nun, lasst uns auf unser Ziel zugreifen. Unser Ziel wird sein, wenn wir verrückte Leute ankreuzen, wird es dieses LI-Tag Rochester sein. Wir wollen darauf zugreifen und dann wollen wir abfragen, wählen Sie alle seine Elemente darunter, oder? So können wir auf diese Ziele zugreifen. Wir können dann auf die Methode Abfrage Selektor zugreifen, Abfrage Selektor, und wir wollen alle UL-Elemente zu erhalten. So weit so gut. Aber wenn wir jetzt nur mit dieser Variablen arbeiten, was passiert, wenn wir auf klicken, sagen Sie das, ich nehme Grünkohl. Nun, Sie würden mir zustimmen, dass Sie nicht alle innerhalb dieses LI-Tags existieren. Es wird also undefiniert sein. Die Verlustprüfung, die wir tun müssen, ist, dass wir nur sagen müssen, ob es existiert, wenn es existiert, dann wissen wir, dass es nicht undefiniert sein wird. So können wir einfach sagen, ob es existiert und wie wir unseren Code ausführen können. Was wollen wir damit tun? Wie verbergen wir, dass Sie, Ich nehme, gut die vielen Möglichkeiten, um eine Katze zu Haut, wenn es um die Programmierung geht. Aber warum fügen wir nicht einfach eine Klasse hinzu? Und diese Klasse kann eine Eigenschaft in ihrer Anzeigeeigenschaft haben, die nur zum Ausblenden gespeichert werden kann. Und wir können das einfach ein- und ausschalten. Lassen Sie mich Ihnen zeigen, was ich meine. Also lassen Sie uns zu unserem HTML an der Spitze gehen. Das ist ein Kopfbereich darin enthalten, ein Stilelement. Und lassen Sie uns einfach eine Klasse namens Hyde hinzufügen. Und wie gesagt, es hat eine Anzeigeeigenschaft und wir können nur einen Wert von none haben. Heute gehen wir, wir haben eine neue Klausel definiert. Ganz unten wissen wir also, dass alles nach Plan passiert ist. Wir können auf unsere neue Variable zugreifen. Wir können dann auf seine Krallenlisteneigenschaft zugreifen. Denken Sie daran, dass wir dies in früheren Vorträgen getan haben, aber jetzt gibt es eine andere Methode namens toggle, und es ist sehr praktisch und ihr Name gibt es weg, dass buchstäblich eine Klasse umschalten, hinzufügen und entfernen. Und die Klasse, die wir umschalten wollen, ist natürlich die Haida-Klasse Crew. Lassen Sie uns einfach überprüfen, ob das funktioniert. Lasst uns auf Meets klicken. Während diese Probleme wieder auf Lecks nehmen, lassen Sie uns auf andere klicken. Lass uns Gemüse aufmachen. Lassen Sie uns Anya Schlüssel eins klicken. Leckeres rotes Fleisch, Fleisch, Gemüse. Regel. Das macht Spaß. Und ich hoffe, Sie haben eine Tonne in diesem Vortrag ernsthaft gelernt. Und manchmal machen Sie einfach einen Schritt zurück und gehen Sie Schritt für Schritt durch. Weißt du noch, was wir getan haben? Gehen Sie zurück zu unserem Code hier definieren wir unsere Event-Delegation ist auf diesem riesigen Eulenelement direkt an der Spitze, weil wir wissen, dass nur Adern nicht klicken Ereignisse in einer Blase durch sie haben. Dann wollten wir uns die kitzeligen Adern anhören. Und schließlich, wenn dieses Ereignis passiert, wollten wir eine Funktion ausführen und wir rufen diese Funktion einfach show oder hide auf. Das Anzeigen, Ausblenden überprüft nur, dass das Element, auf das wir geklickt haben, tatsächlich auf einem LI-Tag ist , weil wir nicht möchten, dass Dinge versteckt und angezeigt werden, wenn wir zufällig auf eine Seite klicken, muss OK sein. Wir überprüften, dass es ein Verbündet-Tag sein musste. Wir mussten dann überprüfen, ob es tatsächlich diese riesigen Eulenelemente darunter hat. Und wenn ja, wollen wir diese Klasse auf einen Eid umschalten, diese Klasse von HIV. Also da haben wir es. Hoffe einfügen zu der Zeit, hoffe, Sie haben Spaß. Und wir sehen uns in der nächsten Vorlesung. 32. Kurs Outro: Gut gemacht, meine lieben Studenten. Gut gemacht. Sie haben gerade diese tolle Klasse über sehr fortgeschrittene Konzepte beendet. Ich könnte Knotenhierarchie oder Objekthierarchie hinzufügen, Ereignis, das jede Vene öffentlich erfasst, ist es dann, wenn Sie wirklich anfangen, den Spender zu meistern, und ich muss sagen, diese gesamte Kursreihe hat zu diesem Moment geführt, weil in der nächsten Klasse in der letzten Klasse der Serie, möchte ich, dass wir alle Techniken anwenden, all das Wissen, das wir in diesem Kurs gelernt haben. Und Gold, ein echtes Leben mit ihnen. Kannst du diese Vögel hören? Die werden Hadi genannt. Ist sie wunderschön. Summen in zäh jetzt kommen in schön Jetzt wo es war, ja, wir beginnen ein tolles Projekt in der nächsten Niederlage, wo wir eine Menge der Techniken anwenden, die Sie gelernt haben, um eine Eisenbahn zurück zu bauen. Sie werden Dinge dynamisch zum DOM hinzufügen. Wir werden Dinge aus dem DOM entfernen. Wir werden es einem Benutzer ermöglichen, nach Elementen in dem Hund zu suchen , der faszinierend sein wird und auch Elemente im DOM verbergen wird. Es wird großartig werden. Also rufe ich weiß an, bleib bei mir. Du hast nur 100 in der Nähe. Wäre eine Schande, wenn du jetzt aufhören würdest. Vielen Dank für Ihre Unterstützung. Tun Sie die Aufgabe. Es ist eine lustige Aufgabe. Selten gibt es kein Richtiges oder Falsches, weil es ein Ehrlichkeitssystem ist. Du musst einfach den Auftrag durchgehen, die Fragen beantworten und dann sehe ich dich, meine lieben Schüler in der nächsten Klasse.