JavaScript의 이벤트 유형: 일반적인 키보드 및 마우스 이벤트

JavaScript는 웹 페이지에서 사용자 작업과 상호 작용하고 응답할 수 있는 다양한 이벤트를 제공합니다. 이러한 이벤트 중에서 키보드 및 마우스 이벤트가 가장 일반적으로 사용됩니다. 이 기사에서는 JavaScript의 다양한 유형의 키보드 및 마우스 이벤트를 살펴보고 이를 사용하는 방법의 예를 살펴보겠습니다.

키보드 이벤트

키보드 이벤트는 사용자가 키를 누르거나, 키를 놓거나, 문자를 입력하는 등 키보드와 상호 작용할 때 발생합니다. 키보드 이벤트를 사용하면 사용자가 양식에 올바르게 입력했는지 확인하거나 특정 키를 눌렀을 때 어떤 일이 발생하는지 확인하는 등 몇 가지 멋진 작업을 수행할 수 있습니다. 이는 마치 웹사이트가 사용자가 누르는 키를 듣고 그에 따라 반응하는 것과 같습니다. 키보드 이벤트는 세 가지 유형으로 구분됩니다:

<strong>keydown</strong> 이벤트

이 키보드 이벤트는 사용자가 키를 누를 때 트리거됩니다. 사용자가 키를 누르고 있으면 반복적으로 실행됩니다.

이 코드는 누른 키를 나타내는 keydown 事件的工作原理。它向文档对象的 keydown 事件添加一个事件侦听器。当按下键盘上的某个键时，将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串 Key Pressed is:，后跟 event.key 값을 보여줍니다.

keyup 이벤트

이 키보드 이벤트는 키를 놓을 때 발생합니다. 사용자가 특정 키를 놓는 시기를 감지하는 데 사용할 수 있습니다.

위 코드는 keyup 事件添加了一个事件监听器，这样当键盘上松开某个键时，就会执行一个箭头功能。该箭头函数将 event.key 的值赋给名为 name 的变量，它代表释放的密钥。释放按键时会出现一个警告框，并显示一条消息，其中包含字符串 Key Pressed:，后跟使用字符串插值的 name 变量的值 (${name} 이벤트에 대한 이벤트 리스너를 추가하여 키보드에서 키를 놓으면 화살표 기능이 수행됩니다. 화살표 함수는 event.key 값을 해제된 키를 나타내는 name이라는 변수에 할당합니다. 키를 놓으면

문자열과 문자열 보간법을 사용한 name 변수 값(${name}). <code>keyup 事件的另一个示例是设置一个输入字段并创建一个函数，当用户释放按键时，该函数将输入字段中键入的字符转换为大写。要尝试下面的示例，请创建一个 id 为 fname 的输入标记和一个类似 onkeyup="myFunction()" 이벤트를 설명하기 위해 를 사용할 수 있는 또 다른 예는 입력 필드를 설정하고 사용자가 키를 놓을 때 입력 필드에 입력된 문자를 대문자로 변환하는 함수를 만드는 것입니다. 아래 예를 시도하려면 ID가 fname

인 입력 태그와 입력 태그 내부에 <strong>keypress</strong>

keypress 事件。在下面的代码示例中，事件侦听器被添加到文档对象中，该事件侦听器在按下按键并生成字符值时执行函数。箭头函数将一条消息记录到浏览器的控制台，其中包含字符串 Key Pressed:，后跟 event.key과 같은 입력 태그를 생성하세요. . 으아악 keypress

이벤트

키를 누르면 keypress 이벤트가 트리거됩니다. 다음 코드 예제에서는 키를 누를 때 함수를 실행하고 문자 값을 생성하는 문서 객체에 이벤트 리스너를 추가합니다. 화살표 함수는 문자열과 누른 키의 문자 값을 나타내는 event.key 값을 포함하는 메시지를 브라우저 콘솔에 기록합니다.

키보드 이벤트 사용 예시

<strong>点击</strong>

반면, 마우스 이벤트는 더욱 매력적인 웹사이트를 만드는 데 도움이 될 수 있습니다. 클릭, 이동, 스크롤 등 마우스가 HTML 문서와 상호 작용할 때 발생하는 이벤트를 처리

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

您还可以构建一个简单的游戏，用户可以通过使用 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，允许我们捕获并响应用户与鼠标的交互。

요약하자면 JavaScript의 키보드 및 마우스 이벤트를 사용하면 키 누름과 마우스 움직임을 캡처하여 사용자 활동을 듣고 응답하는 것처럼 보이는 웹사이트를 구축할 수 있습니다. 다양한 유형의 키보드 및 마우스 이벤트와 이를 사용하여 대화형 웹 사이트 및 웹 애플리케이션을 구축하는 방법을 이해했으므로 이제 재미있는 대화형 게임 및 웹 사이트를 구축해 보세요. 즐거운 코딩하세요!

위 내용은 JavaScript의 이벤트 유형: 일반적인 키보드 및 마우스 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!