Meisterung von HTML-Ereignisattributen

Einführung

HTML-Ereignisattribute werden verwendet, um Funktionalität zu HTML-Elementen hinzuzufügen. Wenn ein bestimmtes Ereignis auftritt, wie z. B. ein Benutzer klickt auf einen Button oder ein Formular abgibt, kann JavaScript-Code ausgeführt werden. In diesem Lab werden Sie lernen, wie Sie HTML-Ereignisattribute verwenden, um Interaktivität zu Ihren Webseiten hinzuzufügen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70754{{"HTML-Ereignisattribute"}} html/head_elems -.-> lab-70754{{"HTML-Ereignisattribute"}} html/doc_flow -.-> lab-70754{{"HTML-Ereignisattribute"}} html/embed_media -.-> lab-70754{{"HTML-Ereignisattribute"}} html/forms -.-> lab-70754{{"HTML-Ereignisattribute"}} html/form_valid -.-> lab-70754{{"HTML-Ereignisattribute"}} html/form_access -.-> lab-70754{{"HTML-Ereignisattribute"}} html/inter_elems -.-> lab-70754{{"HTML-Ereignisattribute"}} html/custom_attr -.-> lab-70754{{"HTML-Ereignisattribute"}} end

Erstellen einer HTML-Dokument

Erstellen Sie eine neue Datei mit dem Namen index.html und fügen Sie die grundlegende HTML-Struktur hinzu.

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

Hinzufügen eines Buttons

Fügen Sie ein button-Element zum body Ihrer HTML-Dokument hinzu. Geben Sie ihm einen Text zum Anzeigen und ein id-Attribut, damit wir es in unserem JavaScript-Code referenzieren können.

<button id="myButton">Click Here</button>

Hinzufügen eines Ereignisattributs

Fügen Sie ein onclick-Attribut zum button-Element hinzu. In diesem Attribut werden wir den JavaScript-Code angeben, der ausgeführt werden soll, wenn der Button geklickt wird.

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

Hinzufügen von mehr Funktionalität

Fügen Sie ein div-Element zum body Ihres HTML-Dokuments hinzu. Dieses Element wird verwendet, um Text anzuzeigen, wenn der Button geklickt wird.

<div id="myDiv"></div>

Als Nächstes fügen Sie JavaScript-Code hinzu, um den Text des div-Elements zu aktualisieren, wenn der Button geklickt wird.

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

Behandeln der Formularübermittlung

Fügen Sie ein HTML-Formular zum body Ihres HTML-Dokuments hinzu. Fügen Sie außerdem ein onsubmit-Attribut zum Formular hinzu, um den JavaScript-Code anzugeben, der ausgeführt werden soll, wenn das Formular übermittelt wird.

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Verwenden von Ereignislistehern

Anstatt Ereignisattribute direkt in unserem HTML zu verwenden, können wir auch JavaScript verwenden, um Ereignislisteher an unsere HTML-Elemente anzuhängen.

Zunächst entfernen Sie die onclick- und onsubmit-Attribute von Ihren HTML-Elementen.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Als Nächstes erstellen Sie eine JavaScript-Funktion, die aufgerufen wird, wenn der Button geklickt wird. Diese Funktion sollte den Text des div-Elements aktualisieren.

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

Schließlich hängen Sie einen Ereignislistener an den Button mit JavaScript an.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

Entfernen von Ereignislistehern

Wir können auch Ereignislisteher mit JavaScript entfernen.

Fügen Sie einen neuen Button zu Ihrem HTML-Dokument hinzu. Dieser Button wird den Click-Ereignislistener vom ersten Button entfernen.

<button id="removeButton">Remove Click Event Listener</button>

Als Nächstes erstellen Sie eine neue JavaScript-Funktion, die den Click-Ereignislistener vom ersten Button entfernt.

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

Schließlich hängen Sie einen Ereignislistener an den neuen Button an, der die removeClickListener()-Funktion aufruft, wenn er geklickt wird.

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

Zusammenfassung

In diesem Lab haben Sie gelernt, wie Sie HTML-Ereignisattribute verwenden, um Interaktivität zu Ihren Webseiten hinzuzufügen. Sie haben auch gelernt, wie Sie JavaScript verwenden, um Ereignislisteher an HTML-Elemente anzuhängen und zu entfernen. Mit diesen Tools können Sie dynamische Webseiten erstellen, die auf Benutzereingaben reagieren.