suchen

Heim  >  Artikel  >  Web-Frontend  >  Tiefes Verständnis von Ereignissen in JavaScript

Tiefes Verständnis von Ereignissen in JavaScript

青灯夜游
青灯夜游nach vorne
2020-09-28 17:56:582572Durchsuche

Tiefes Verständnis von Ereignissen in JavaScript

In diesem Artikel besprechen wir Event-Handler, Event-Listener und Event-Objekte. Wir behandeln außerdem drei verschiedene Möglichkeiten, mit Ereignissen umzugehen, sowie einige der gebräuchlichsten. Durch das Verständnis von Ereignissen können Sie Benutzern ein interaktiveres Web-Erlebnis bieten.

Ereignisse sind Aktionen, die im Browser stattfinden und vom Benutzer oder vom Browser selbst initiiert werden können. Hier sind einige gängige Ereignisse, die auf Websites stattfinden:

  • Seite beendet das Laden

  • Benutzer klicken auf eine Schaltfläche

  • Der Benutzer schwebt über einen Dropdown

  • Der Benutzer reicht ein Formular ein. auf der Tastatur

  • Durch die Codierung von JavaScript-Antworten, die bei Ereignissen ausgeführt werden, können Entwickler dem Benutzer Nachrichten anzeigen, Daten validieren, auf Schaltflächenklicks reagieren und viele andere Aktionen ausführen.

Event-Handler und Event-Listener

Wenn der Benutzer auf eine Schaltfläche klickt oder eine Taste drückt, wird ein Ereignis ausgelöst. Diese werden als Klickereignisse bzw. Tastenereignisse bezeichnet. Ein Event-Handler ist eine JavaScript-Funktion, die ausgeführt wird, wenn ein Ereignis ausgelöst wird.

Ein Ereignis-Listener ist an ein reaktionsfähiges Schnittstellenelement angehängt, das es einem bestimmten Element ermöglicht, auf die Auslösung eines bestimmten Ereignisses zu warten und zu „lauschen“.

Es gibt drei Möglichkeiten, Ereignisse Elementen zuzuweisen:

Inline-Ereignishandler

  • Ereignishandlereigenschaften

  • Ereignis-Listener

  • Wir werden diese drei Methoden im Detail behandeln, um sicherzustellen, dass Sie sich damit vertraut machen Machen Sie sich mit jeder Methode zum Auslösen eines Ereignisses vertraut und besprechen Sie dann die Vor- und Nachteile jeder Methode.


Inline-Event-Handler-Eigenschaften

Um etwas über Event-Handler zu lernen, betrachten wir zunächst Inline-Event-Handler. Beginnen wir mit einem sehr einfachen Beispiel, das aus einem Button-Element und einem p-Element besteht. Wir möchten, dass der Benutzer auf eine Schaltfläche klickt, um den Textinhalt von p zu ändern.

Beginnen wir mit einer HTML-Seite mit Schaltflächen. Wir verweisen auf eine JavaScript-Datei, zu der wir später Code hinzufügen. 

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <!-- Add button -->
    <button>Click me</button>
    <p>Try to change me.</p>
  </body>
  <!-- Reference JavaScript file -->
  <script src="js/events.js"></script>

</html>
Direkt auf der Schaltfläche fügen wir ein Attribut namens onclick hinzu. Der Eigenschaftswert ist eine von uns erstellte Funktion namens changeText(). 

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <button onclick="changeText()">Click me</button>
    <p>Try to change me.</p>
  </body>
  <script src="js/events.js"></script>

</html>

Lassen Sie uns die Datei events.js erstellen, die sich hier im js/-Verzeichnis befindet. Darin erstellen wir die Funktion changeText(), die den textContent des p-Elements ändert. 

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an inline event handler.";
}

Wenn Sie events.html zum ersten Mal laden, sehen Sie eine Seite, die so aussieht:

Wenn Sie oder ein anderer Benutzer jedoch auf die Schaltfläche klicken, ändert sich der Text des p-Tags von Try um mich zu ändern. Ich habe es wegen Inline-Ereignishandlern geändert.

Tiefes Verständnis von Ereignissen in JavaScript

Inline-Ereignishandler sind eine einfache Möglichkeit, Ereignisse zu verstehen, sollten jedoch im Allgemeinen nicht über Test- und Schulungszwecke hinaus verwendet werden.

Tiefes Verständnis von Ereignissen in JavaScriptSie können Inline-Ereignishandler mit Inline-CSS-Stilen für HTML-Elemente vergleichen. Das Verwalten eines separaten Klassen-Stylesheets ist praktischer als das Erstellen von Inline-Stilen für jedes Element, genau wie das Verwalten von JavaScript, das vollständig über eine separate Skriptdatei verwaltet wird, anstatt jedem Element Handler hinzuzufügen.

Event-Handler-Eigenschaften

Der nächste Schritt bei Inline-Event-Handlern sind die Event-Handler-Eigenschaften. Dies ist einem Inline-Handler sehr ähnlich, außer dass wir das Attribut des Elements in JavaScript und nicht in HTML festlegen.

Der Aufbau hier ist derselbe, außer dass wir onclick="changeText()" nicht mehr in das Markup aufnehmen: 

… < body >

<button > Click me < /button>

    <p>I will change.</p >

</body>
…/
Auch unsere Funktion bleibt ähnlich, nur müssen wir jetzt in JavaScript auf das Schaltflächenelement zugreifen. Wir können einfach auf onclick zugreifen, so wie wir auf style, id oder jedes andere Elementattribut zugreifen würden, und dann die Funktionsreferenz zuweisen. 

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector(&#39;button&#39;);
button.onclick = changeText;

HINWEIS: Event-Handler folgen nicht der camelCase-Konvention, der der meiste JavaScript-Code folgt. Beachten Sie, dass der Code onclick und nicht onclick ist.

Wenn Sie zum ersten Mal eine Webseite laden, zeigt Ihr Browser Folgendes an:

Wenn Sie nun auf diese Schaltfläche klicken, hat dies einen ähnlichen Effekt:

Tiefes Verständnis von Ereignissen in JavaScript

Bitte beachten Sie dies beim Übergeben einer Funktion Bei einem Verweis auf das onclick-Attribut verzichten wir auf die Klammern, da wir die Funktion zu diesem Zeitpunkt nicht aufrufen, sondern nur einen Verweis darauf übergeben.

事件处理程序属性的可维护性略好于内联处理程序，但它仍然存在一些相同的障碍。例如，尝试设置多个单独的onclick属性将导致覆盖除最后一个外的所有属性，如下所示。

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

const changeText = () = >{
    p.textContent = "Will I change?";
}

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

在上面的例子中，单击按钮只会显示一个警告，而不会更改p文本，因为alert()代码是最后添加到属性的代码。

Tiefes Verständnis von Ereignissen in JavaScript

了解了内联事件处理程序和事件处理程序属性之后，让我们转向事件侦听器。

事件监听器

JavaScript事件处理程序的最新添加是事件侦听器。事件侦听器监视元素上的事件。我们将使用addEventListener()方法侦听事件，而不是直接将事件分配给元素上的属性。

addEventListener()接受两个强制参数——要侦听的事件和侦听器回调函数。

事件监听器的HTML与前面的示例相同。

… < button > Click me < /button>

    <p>I will change.</p > …

我们仍然将使用与以前相同的changeText()函数。我们将把addEventListener()方法附加到按钮上。

// Function to modify the text content of the paragraph
const changeText = () = >{
    const p = document.querySelector(&#39;p&#39;);

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector(&#39;button&#39;);
button.addEventListener(&#39;click&#39;, changeText);

注意，对于前两个方法，click事件被称为onclick，但是对于事件监听器，它被称为click。每个事件监听器都会从单词中删除这个词。在下一节中，我们将查看更多其他类型事件的示例。

当您用上面的JavaScript代码重新加载页面时，您将收到以下输出:

Tiefes Verständnis von Ereignissen in JavaScript

初看起来，事件监听器看起来与事件处理程序属性非常相似，但它们有一些优点。我们可以在同一个元素上设置多个事件侦听器，如下例所示。

const p = document.querySelector(&#39;p&#39;);
const button = document.querySelector(&#39;button&#39;);

const changeText = () = >{
    p.textContent = "Will I change?";
}

const alertText = () = >{
    alert(&#39;Will I alert?&#39;);
}

// Multiple listeners can be added to the same event and element
button.addEventListener(&#39;click&#39;, changeText);
button.addEventListener(&#39;click&#39;, alertText);

在本例中，这两个事件都将触发，一旦单击退出警告，就向用户提供一个警告和修改后的文本。

通常，将使用匿名函数而不是事件侦听器上的函数引用。匿名函数是没有命名的函数。

// An anonymous function on an event listener
button.addEventListener(&#39;click&#39;, () = >{
    p.textContent = "Will I change?";
});

还可以使用removeEventListener()函数从元素中删除一个或所有事件。

// Remove alert function from button element
button.removeEventListener(&#39;click&#39;, alertText);

此外，您可以在文档和窗口对象上使用addEventListener()。

事件监听器是当前在JavaScript中处理事件的最常见和首选的方法。

常见的事件

我们已经了解了使用click事件的内联事件处理程序、事件处理程序属性和事件侦听器，但是JavaScript中还有更多的事件。下面我们将讨论一些最常见的事件。

鼠标事件

鼠标事件是最常用的事件之一。它们指的是涉及单击鼠标上的按钮或悬停并移动鼠标指针的事件。这些事件还对应于触摸设备上的等效操作。

事件
 描述
click 当鼠标被按下并释放到元素上时触发
dblclick 当元素被单击两次时触发
mouseenter 当指针进入元素时触发
mouseleave 当指针离开一个元素时触发
mousemove 每当指针在元素中移动时触发

Click ist ein zusammengesetztes Ereignis, das aus den kombinierten Mousedown- und Mouseup-Ereignissen besteht, die ausgelöst werden, wenn die Maustaste gedrückt bzw. angehoben wird.

Verwenden Sie MouseEnter und MouseLeave gleichzeitig, um einen Hover-Effekt zu erzeugen, der so lange anhält, wie der Mauszeiger auf dem Element bleibt.

Formularereignisse

Formularereignisse sind formularbezogene Aktionen, z. B. das Auswählen oder Aufheben der Auswahl von Eingabeelementen und das Absenden von Formularen.

Unschärfe Wann Ein Element verliert den Fokus. Wird ausgelöst, wenn Der Fokus erreicht wird, wenn ein Element ausgewählt wird, z. B. durch Mausklick oder durch Navigieren zu diesem über die TAB-Taste.
Ereignis
 Beschreibung
Senden Wird ausgelöst, wenn das Formular gesendet wird.
Fokus. Wird ausgelöst, wenn ein Element (z. B. eine Eingabe) den Fokus erhält
JavaScript wird häufig zum Senden von Formularen und zum Senden von Werten an Backend-Sprachen verwendet. Die Vorteile der Verwendung von JavaScript zum Senden eines Formulars bestehen darin, dass für das Absenden des Formulars kein Neuladen der Seite erforderlich ist und die erforderlichen Eingabefelder mithilfe von JavaScript validiert werden können.

Tastaturereignisse

Tastaturereignisse werden verwendet, um Tastaturoperationen wie das Drücken einer Taste, das Anheben einer Taste und das Halten einer Taste zu verarbeiten.

EreignisBeschreibungTaste nach untenWird einmal ausgelöst, wenn eine Taste gedrückt wird Drücken SieKontinuierliches Feuern, wenn Sie drücken keyWenn wir einen Parameter namens Ereignisobjekt an einen Ereignis-Listener übergeben, können wir auf weitere Informationen über die aufgetretene Aktion zugreifen. Zu den drei Eigenschaften, die sich auf das Tastaturobjekt beziehen, gehören keyCode, key und code. Property

Obwohl sie ähnlich aussehen, greifen die Ereignisse „keydown“ und „keypress“ nicht auf genau dieselben Tasten zu. Mit „keydown“ wird jede gedrückte Taste bestätigt, während mit „keypress“ Tasten weggelassen werden, die keine Zeichen erzeugen, wie etwa SHIFT, ALT oder DELETE. Tastaturereignisse haben spezielle Eigenschaften für den Zugriff auf einzelne Tasten.
Wenn der Benutzer beispielsweise die Taste „a“ auf der Tastatur drückt, werden die folgenden Eigenschaften im Zusammenhang mit dieser Taste angezeigt:

Description

Example

keyCode

Die zugeordnete Nummer der Schlüssel. 65

为了展示如何通过JavaScript控制台收集这些信息，我们可以编写以下代码行。

// Test the keyCode, key, and code properties
document.addEventListener(&#39;keydown&#39;, event = >{
    console.log(&#39;key: &#39; + event.keyCode);
    console.log(&#39;key: &#39; + event.key);
    console.log(&#39;code: &#39; + event.code);
});

一旦在控制台上按下ENTER键，现在就可以按键盘上的键了，在本例中，我们将按a。

输出：

keyCode: 65
key: a
code: KeyA

keyCode属性是一个与已按下的键相关的数字。key属性是字符的名称，它可以更改——例如，用SHIFT键按下a将导致键为a。code属性表示键盘上的物理键。

注意，keyCode正在被废弃，最好在新项目中使用代码。

事件对象

该Event对象由所有事件都可以访问的属性和方法组成。除了通用Event对象之外，每种类型的事件都有自己的扩展名，例如KeyboardEvent和MouseEvent。

该Event对象作为参数传递给侦听器函数。它通常写成event或e。我们可以访问事件的code属性keydown来复制PC游戏的键盘控件。

要试用它，请使用

标记创建基本HTML文件并将其加载到浏览器中。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <p>
    </p>
  </body>

</html>

然后，在浏览器的开发者控制台中键入以下JavaScript代码。

// Pass an event through to a listener
document.addEventListener(&#39;keydown&#39;, event = >{
    var element = document.querySelector(&#39;p&#39;);

    // Set variables for keydown codes
    var a = &#39;KeyA&#39;;
    var s = &#39;KeyS&#39;;
    var d = &#39;KeyD&#39;;
    var w = &#39;KeyW&#39;;

    // Set a direction for each code
    switch (event.code) {
    case a:
        element.textContent = &#39;Left&#39;;
        break;
    case s:
        element.textContent = &#39;Down&#39;;
        break;
    case d:
        element.textContent = &#39;Right&#39;;
        break;
    case w:
        element.textContent = &#39;Up&#39;;
        break;
    }
});

当您按下一个键- ，a，s，d或者w-你会看到类似以下的输出：

Tiefes Verständnis von Ereignissen in JavaScript

从这里开始，您可以继续开发浏览器的响应方式以及按下这些键的用户，并可以创建更加动态的网站。

接下来，我们将介绍一个最常用的事件属性：target属性。在下面的示例中，我们div在一个内部有三个元素section。

<!DOCTYPE html>
<html>
  
  <head>
    <title>Events</title></head>
  
  <body>
    <section>
      <div id="one">One</div>
      <div id="two">Two</div>
      <div id="three">Three</div></section>
  </body>

</html>

使用事件。在浏览器的开发人员控制台中，我们可以将一个事件侦听器放在外部section元素上，并获得嵌套最深的元素。

const section = document.querySelector(&#39;section&#39;);

// Print the selected target
section.addEventListener(&#39;click&#39;, event = >{
    console.log(event.target);
});

单击其中任何一个元素都将使用event.target将相关特定元素的输出返回到控制台。这非常有用，因为它允许您只放置一个事件侦听器，该侦听器可用于访问许多嵌套元素。

Tiefes Verständnis von Ereignissen in JavaScript

使用Event对象，我们可以设置与所有事件相关的响应，包括通用事件和更具体的扩展。

结论

事件是在网站上发生的操作，例如单击，悬停，提交表单，加载页面或按键盘上的键。当我们能够让网站响应用户所采取的操作时，JavaScript就变得真正具有互动性和动态性。

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonTiefes Verständnis von Ereignissen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:digitalocean.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：10 erweiterte Tipps zur Verwendung der Konsole für das JavaScript-DebuggingNächster Artikel：10 erweiterte Tipps zur Verwendung der Konsole für das JavaScript-Debugging

In Verbindung stehende Artikel

Mehr sehen