Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse

JavaScript bietet eine breite Palette von Ereignissen, die es Ihnen ermöglichen, mit Benutzeraktionen auf Webseiten zu interagieren und darauf zu reagieren. Unter diesen Ereignissen werden Tastatur- und Mausereignisse am häufigsten verwendet. In diesem Artikel betrachten wir die verschiedenen Arten von Tastatur- und Mausereignissen in JavaScript und sehen Beispiele für deren Verwendung.

Keyboard-Events

Tastaturereignisse treten auf, wenn der Benutzer mit der Tastatur interagiert, z. B. wenn er eine Taste drückt, eine Taste loslässt oder ein Zeichen eingibt. Mit Tastaturereignissen können wir einige coole Dinge tun, z. B. überprüfen, ob der Benutzer etwas richtig in ein Formular eingegeben hat oder ob etwas passiert, wenn eine bestimmte Taste gedrückt wird. Es ist, als würde die Website auf die von Ihnen gedrückten Tasten hören und entsprechend reagieren. Tastaturereignisse werden in drei Typen unterteilt:

<strong>keydown</strong> Veranstaltungen

Dieses Tastaturereignis wird ausgelöst, wenn der Benutzer eine Taste drückt. Wenn der Benutzer eine Taste gedrückt hält, wird sie wiederholt ausgelöst.

document.addEventListener('keydown', function(event) {
  console.log('Key pressed is:', event.key);
});

Dieser Code zeigt den Wert von keydown 事件的工作原理。它向文档对象的 keydown 事件添加一个事件侦听器。当按下键盘上的某个键时，将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串 Key Pressed is:，后跟 event.key, der die gedrückte Taste darstellt.

keyup Veranstaltungen

Dieses Tastaturereignis tritt auf, wenn eine Taste losgelassen wird. Es kann verwendet werden, um zu erkennen, wann der Benutzer eine bestimmte Taste loslässt.

document.addEventListener('keyup', (event) => {
    var name = event.key;
    alert(`Key pressed: ${name}`);
}, false);

Der obige Code fügt einen Ereignis-Listener für das keyup 事件添加了一个事件监听器，这样当键盘上松开某个键时，就会执行一个箭头功能。该箭头函数将 event.key 的值赋给名为 name 的变量，它代表释放的密钥。释放按键时会出现一个警告框，并显示一条消息，其中包含字符串 Key Pressed:，后跟使用字符串插值的 name 变量的值 (${name}-Ereignis hinzu, sodass beim Loslassen einer Taste auf der Tastatur eine Pfeilfunktion ausgeführt wird. Die Pfeilfunktion weist den Wert von event.key einer Variablen namens name zu, die den freigegebenen Schlüssel darstellt. Wenn die Taste losgelassen wird, erscheint ein Warnfeld mit einer Meldung, die die Zeichenfolge

Key Pressed:

enthält, gefolgt vom Wert der Variablen name unter Verwendung von Zeichenfolgeninterpolation (${name} ). <code>keyup 事件的另一个示例是设置一个输入字段并创建一个函数，当用户释放按键时，该函数将输入字段中键入的字符转换为大写。要尝试下面的示例，请创建一个 id 为 fname 的输入标记和一个类似 onkeyup="myFunction()" Ein weiteres Beispiel, bei dem zur Demonstration des -Ereignisses verwendet werden kann, besteht darin, ein Eingabefeld einzurichten und eine Funktion zu erstellen, die die in das Eingabefeld eingegebenen Zeichen in Großbuchstaben umwandelt, wenn der Benutzer die Taste loslässt. Um das folgende Beispiel auszuprobieren, erstellen Sie ein Eingabe-Tag mit der ID fname

und einem Eingabe-Tag wie <strong>keypress</strong>

onkeyup="myFunction()"

keypress 事件。在下面的代码示例中，事件侦听器被添加到文档对象中，该事件侦听器在按下按键并生成字符值时执行函数。箭头函数将一条消息记录到浏览器的控制台，其中包含字符串 Key Pressed:，后跟 event.key innerhalb des Eingabe-Tags .

function myFunction() {
  let x = document.getElementById("fname"); 
  x.value = x.value.toUpperCase();
}

keypress

Ereignis

Das keypress-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird. Im folgenden Codebeispiel wird dem Dokumentobjekt ein Ereignis-Listener hinzugefügt, der beim Drücken einer Taste eine Funktion ausführt und einen Zeichenwert generiert. Die Pfeilfunktion protokolliert eine Nachricht an die Konsole des Browsers, die die Zeichenfolge enthält, gefolgt vom Wert von event.key, der den Zeichenwert der gedrückten Taste darstellt.

p>

document.addEventListener('keypress', (event) => {
    console.log('Key pressed:', event.key);
});

warnen Einige Browser unterstützen das Tastenereignis nicht mehr und nicht alle Tasten (z. B. Alt, Strg, Umschalt oder Esc) lösen das Ereignis in allen Browsern aus. Es wird empfohlen, stattdessen Keydown- oder Keyup-Ereignisse zu verwenden.

Beispiel für die Verwendung von Tastaturereignissen

<strong>点击</strong>

Maus-Events

Andererseits können Maus-Events Ihnen dabei helfen, eine attraktivere Website zu erstellen. Sie verarbeiten Ereignisse

, die auftreten, wenn die Maus mit einem HTML-Dokument interagiert, beispielsweise durch Klicken, Verschieben oder Scrollen. Sie ermöglichen es uns zu reagieren, wenn der Benutzer eine Maustaste klickt, die Maus über ein Element bewegt oder ein Element auf dem Bildschirm zieht. Es ist, als würde die Website Ihre Mausbewegungen und Klicks verfolgen, um herauszufinden, was Sie tun möchten. Es gibt viele Arten von Mausereignissen:

btn 的按钮。上面的代码使用 querySelector 方法选择 CSS 类名为 btn 的元素，并将其分配给 element 变量。侦听 click

Click🎜-Ereignis🎜 🎜Dieses Ereignis wird ausgeführt, wenn 🎜der Benutzer auf ein Element klickt. 🎜🎜

var element = document.querySelector('.btn');
element.addEventListener('click', function () {
  element.style.backgroundColor = 'blue';
});

🎜Um den obigen Code auszuführen, erstellen Sie einen Ereignis-Listener in HTML mit einem CSS-Klassennamen. 🎜Event wurde dem Element hinzugefügt. Wenn Sie auf dieses Element klicken, wird die angegebene Funktion ausgeführt. Die Funktion in diesem Beispiel besteht darin, die Hintergrundfarbe des Elements in Blau zu ändern. 🎜

您还可以构建一个简单的游戏，用户可以通过使用 math.floor 和 math.random 方法生成随机颜色，在框内单击以连续更改框的背景颜色。

<strong>dbclick</strong> 事件

当用户用鼠标双击某个元素时，此事件调用一个函数。要执行下面的代码示例，请在 HTML 中创建一个 CSS 类名称为 btn 的按钮。使用 querySelector 方法获取元素并向其添加事件侦听器。双击该按钮时，将调用该函数，显示一条警报消息，并且按钮中文本的字体大小会增加。

var button = document.querySelector('.btn');
button.addEventListener('dblclick', function (event) {
  alert('Button double-clicked!');
  button.style.fontSize = '40px';
});

使用 dbclick 事件的高级方法是使用户能够编辑内容。例如，双击文本元素可以将其转换为可编辑的输入字段，允许用户直接进行更改。下面是使用 dbclick 事件编辑内容的演示。

<strong>mouseup</strong> 和 <strong>mousedown</strong> 事件

当用户将光标悬停在某个元素上并按下鼠标按钮时，会触发此 mousedown 事件。 创建一个 id 为 text 的按钮。当用鼠标单击该按钮时，会触发消息：“鼠标按钮已按下”。

var button = document.getElementById('text');
button.addEventListener('mousedown', function (event) {
  alert('Mouse button pressed!');
});

当用户单击某个元素后释放鼠标按钮时，会触发 mouseup 事件。创建一个 id 为 text 的按钮。当用鼠标单击按钮并释放时，会触发消息：“鼠标按钮已释放”。

var button = document.getElementById('text');
button.addEventListener('mouseup', function (event) {
  alert('Mouse button released!');
});

如何使用这些 mouseup 和 mousedown 事件的实际示例是在实现拖放功能以及绘图和草图时。

<strong>mouseover</strong> 和 <strong>mouseout</strong> 事件

当鼠标指针悬停在某个元素上时，会发生 mouseover 事件，而当鼠标指针离开该元素时，会发生 mouseout 事件。这是这两个鼠标事件的快速演示。

在上面的演示中，当用户的鼠标经过图像时，图像会放大，当鼠标离开图像时，图像会恢复到正常大小。

mouseover 事件可用于创建一个工具提示，当鼠标悬停在元素上时，该提示提供有关该元素的附加信息。 mouseover 和 mouseout 事件还可用于创建交互式导航菜单，其中当用户的鼠标指针悬停在菜单项上时会出现子菜单。

<strong>mousemove</strong> 和 <strong>mouseleave</strong> 事件

当用户将鼠标光标移动到某个元素上时，会触发 mousemove 事件，当鼠标光标离开该元素时，会触发 mouseleave 事件。这些事件使开发人员能够监视鼠标移动。

每当用户的鼠标位于 div 容器内时，上述代码都会获取鼠标指针坐标，并将坐标显示为框下方的文本。然后，在用户鼠标离开 div 元素后，它会显示文本，指示指针已离开 div。

结论

诸如 keydown、keyup 和 keypress 之类的键盘事件允许我们捕获并响应来自键盘的用户输入。无论您是实现表单验证、提供键盘快捷键还是创建基于文本的游戏，键盘事件对于用户交互都是至关重要的。另一方面，鼠标事件，如click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemovephpcn endcphpcn 和 <code>mouseleave，允许我们捕获并响应用户与鼠标的交互。

Zusammenfassend lässt sich sagen, dass wir mit den Tastatur- und Mausereignissen von JavaScript Websites erstellen können, die scheinbar zuhören und auf Benutzeraktivitäten reagieren, indem sie Tastendrücke und Mausbewegungen erfassen. Nachdem Sie nun die verschiedenen Arten von Tastatur- und Mausereignissen verstanden haben und wissen, wie Sie sie zum Erstellen interaktiver Websites und Webanwendungen verwenden, können Sie mit der Erstellung unterhaltsamer interaktiver Spiele und Websites beginnen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonEreignistypen in JavaScript: Häufige Tastatur- und Mausereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!