JavaScript 常用事件演示

2024-01-02 05:48:40

Hi i,m JinXiang

? 前言 ?

本篇文章主要介绍在在JavaScript 常用事件演示以及部分理论知识

🍉欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

?一、什么是JavaScript？

?二、什么是JavaScript 常用事件？

2、鼠标移入事件 (mouseenter):

3、鼠标移出事件（mouseleave）：

4、鼠标移动事件 (mousemove)：

一、什么是JavaScript？

JavaScript是一种高级编程语言，通常用于在网页中添加交互性和动态功能。它可以用于控制网页的各个方面，例如表单验证、动画效果、页面加载时的动作等。JavaScript是一种客户端脚本语言，意味着它在用户的浏览器中运行，而不是在服务器上。它被广泛应用于网站开发和应用程序开发中。

二、什么是JavaScript 常用事件？

JavaScript常用事件是指在网页中常用的和与用户交互相关的事件。以下是一些常见的JavaScript事件：

点击事件（onclick）：当用户点击某个元素时触发。
鼠标移动事件（onmousemove）：当用户在某个元素上移动鼠标时触发。
鼠标悬停事件（onmouseover）：当用户将鼠标悬停在某个元素上时触发。
键盘按下事件（onkeydown）：当用户按下键盘上的任意键时触发。
表单提交事件（onsubmit）：当用户提交表单时触发。
页面加载事件（onload）：当网页加载完成时触发。
元素失去焦点事件（onblur）：当元素失去焦点时触发。
元素获得焦点事件（onfocus）：当元素获得焦点时触发。

这些事件可以用来实现各种交互功能，例如按钮点击后触发某个操作、鼠标移动到某个区域改变样式等。

三、JavaScript 常用事件使用

常用的JavaScript事件可以通过给HTML元素添加事件监听器来使用。下面是一个具体的使用示例：

假设我们有一个按钮元素，我们想要在按钮被点击时触发一些操作。首先，在HTML中添加一个按钮元素和一个用来显示结果的div元素：

<button id="myButton">点击我</button>
<div id="result"></div>

然后，在JavaScript中获取按钮元素，并添加点击事件监听器：

// 获取按钮元素
var myButton = document.getElementById("myButton");

// 添加点击事件监听器
myButton.addEventListener("click", function() {
    // 在点击事件发生时执行的操作
    console.log("按钮被点击了");
    // 更新结果div的内容
    var resultDiv = document.getElementById("result");
    resultDiv.innerHTML = "按钮被点击了";
});

这样，当用户点击按钮时，控制台会输出"按钮被点击了"，并且结果div的内容也会被更新为"按钮被点击了"。

你可以根据需要选择不同的事件来使用，然后在事件监听器中编写相应的操作逻辑。

常用JS事件：

JavaScript中常用的事件可以总结如下：

点击事件 (click): 当用户点击元素时触发。
鼠标移入/移出事件 (mouseenter/mouseleave): 当鼠标移入或移出元素时触发。
鼠标移动事件 (mousemove): 当鼠标在元素上移动时触发。
键盘按下/松开事件 (keydown/keyup): 当用户按下或松开键盘上的键时触发。
表单提交事件 (submit): 当用户提交表单时触发。
文档加载事件 (DOMContentLoaded): 当页面的HTML文档已加载并解析完成时触发。
元素加载事件 (load): 当元素（如图片）加载完成时触发。
页面滚动事件 (scroll): 当页面滚动时触发。
元素改变事件 (change): 当元素的值发生改变时触发（适用于输入框、下拉框等）。
元素聚焦/失焦事件 (focus/blur): 当元素获得或失去焦点时触发。

以上仅是一些常用的JavaScript事件，实际上JavaScript还有更多的事件类型可供使用。选用合适的事件类型，能够实现丰富的交互效果和用户体验。

使用JS事件注意事项：

在使用JavaScript事件时，有一些注意事项需要注意：

选择合适的事件：根据需要选择适合的事件类型。不同的事件在不同的情况下触发，所以选择正确的事件对于实现所需的交互行为非常重要。
事件冒泡：JavaScript中的事件冒泡指的是，当一个元素上的事件被触发时，它的父元素也会接收到相同的事件触发。这意味着，如果多个元素都有相同的事件监听器，事件触发时可能会冒泡到多个元素上。要注意处理冒泡事件，可以使用 event.stopPropagation() 来停止事件传播。
事件绑定：可以使用 addEventListener() 方法将事件监听器绑定到元素上。可以多次绑定同一个事件到同一个元素上，也可以通过 removeEventListener() 方法解除绑定。
事件处理函数：事件处理函数是处理事件的JavaScript代码。在编写事件处理函数时，要确保代码逻辑正确并且高效。可以通过 event.target 获取事件源元素，并通过 event.preventDefault() 阻止默认行为。
跨浏览器兼容性：不同的浏览器可能对事件的处理方式有所不同。为了确保您的代码在不同的浏览器中正常工作，可以使用跨浏览器的事件处理库，如jQuery等。
注意事件的触发顺序：如果多个元素绑定了同一事件，并且这些元素之间有层级关系，事件触发的顺序可能会影响代码的执行结果。要确保事件的触发顺序符合预期，可以使用事件捕获或事件冒泡来控制。

总之，在使用JavaScript事件时，要确保正确选择事件类型、处理事件冒泡、正确绑定事件、编写高效的事件处理函数、处理跨浏览器兼容性，并注意事件触发的顺序，以确保代码的正确性和性能。

常用JS事件代码示例：

JavaScript中常用的事件示例代码如下：

1、点击事件 (click):

点击事件表示当用户点击一个元素时触发的事件。在JavaScript中，可以使用click事件来监听点击并执行相应的操作。以下是一个点击事件的示例代码：

<button id="myButton">点击我</button>

<script>
   document.getElementById("myButton").addEventListener("click", function(event) {
      // 执行点击时的操作
      console.log("按钮被点击了");
   });
</script>

在上面的代码中，我们通过document.getElementById("myButton")获取到一个带有id为myButton的button元素，并使用addEventListener方法监听其click事件。在事件处理器中，执行点击时的操作（这里只是简单地使用console.log输出一条消息）。可以根据具体需求执行不同的操作，比如弹出提示框、提交表单等。

2、鼠标移入事件 (mouseenter):

鼠标移入事件表示当鼠标指针移入一个元素时触发的事件。在JavaScript中，可以使用mouseover事件来监听鼠标移入并执行相应的操作。以下是一个鼠标移入事件的示例代码：

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div>

<script>
   document.getElementById("myDiv").addEventListener("mouseover", function(event) {
      // 执行鼠标移入时的操作
      console.log("鼠标已移入");
   });
</script>

在上面的代码中，我们通过document.getElementById("myDiv")获取到一个带有id为myDiv的div元素，并使用addEventListener方法监听其mouseover事件。在事件处理器中，执行鼠标移入时的操作（这里只是简单地使用console.log输出一条消息）。可以根据具体需求执行不同的操作，比如显示某个元素、改变某个元素的样式等。

3、鼠标移出事件（mouseleave）：

鼠标移出事件表示当鼠标指针移出一个元素时触发的事件。在JavaScript中，可以使用mouseout事件来监听鼠标移出并执行相应的操作。以下是一个鼠标移出事件的示例代码：

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div>

<script>
   document.getElementById("myDiv").addEventListener("mouseout", function(event) {
      // 执行鼠标移出时的操作
      console.log("鼠标已移出");
   });
</script>

在上面的代码中，我们通过document.getElementById("myDiv")获取到一个带有id为myDiv的div元素，并使用addEventListener方法监听其mouseout事件。在事件处理器中，执行鼠标移出时的操作（这里只是简单地使用console.log输出一条消息）。可以根据具体需求执行不同的操作，比如隐藏某个元素、重置某个表单字段等。

4、鼠标移动事件 (mousemove)：

鼠标移动事件表示当用户在页面上移动鼠标时触发的事件。在JavaScript中，可以使用mousemove事件来监听鼠标移动并执行相应的操作。以下是一个鼠标移动事件的示例代码：

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div>

<script>
   document.getElementById("myDiv").addEventListener("mousemove", function(event) {
      // 执行鼠标移动时的操作
      console.log("鼠标位置：X=" + event.clientX + "，Y=" + event.clientY);
   });
</script>

在上面的代码中，我们通过document.getElementById("myDiv")获取到一个带有id为myDiv的div元素，并使用addEventListener方法监听其mousemove事件。在事件处理器中，通过event.clientX和event.clientY属性获取到鼠标指针在页面上的坐标，并执行相应的操作（这里只是简单地使用console.log输出鼠标位置）。可以根据具体需求对鼠标位置进行进一步的判断和处理。

5、键盘按下事件(keydown)：

键盘按下事件表示当用户按下键盘上的键时触发的事件。在JavaScript中，可以使用keydown事件来监听键盘按下动作并执行相应的操作。以下是一个键盘按下事件的示例代码：

<input type="text" id="myInput">

<script>
   document.getElementById("myInput").addEventListener("keydown", function(event) {
      // 执行键盘按下时的操作
      console.log("键盘按键：" + event.key);
   });
</script>

在上面的代码中，我们通过document.getElementById("myInput")获取到文本框元素，并使用addEventListener方法监听其keydown事件。在事件处理器中，通过event.key属性获取到按下的键的值，并执行相应的操作（这里只是简单地使用console.log输出按下的键）。可以根据具体需求对按下的键进行进一步的判断和处理。

6、键盘松开事件（keyup）：

键盘松开事件表示当用户松开键盘上的键时触发的事件。在JavaScript中，可以使用keyup事件来监听键盘松开动作并执行相应的操作。下面是一个键盘松开事件的示例代码：

<input type="text" id="myInput">

<script>
   document.getElementById("myInput").addEventListener("keyup", function(event) {
      // 执行键盘松开时的操作
      console.log("键盘按键：" + event.key);
   });
</script>

在上面的代码中，通过document.getElementById("myInput")获取到文本框元素，并使用addEventListener方法监听其keyup事件。在事件处理器中，我们通过event.key属性获取到松开的键的值，并执行相应的操作（这里只是简单地使用console.log输出了松开的键）。可以根据具体需求对松开的键进行进一步的判断和处理。

7、表单提交事件(submit)：

表单提交事件表示当用户点击表单的提交按钮时触发的事件。在JavaScript中，可以使用submit事件来监听表单提交动作并执行相应的操作。下面是一个表单提交事件的示例代码：

<form id="myForm">
   <input type="text" name="username" placeholder="请输入用户名">
   <input type="password" name="password" placeholder="请输入密码">
   <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
   event.preventDefault(); // 阻止表单默认的提交行为

   // 获取表单输入的值
   var username = document.querySelector('input[name="username"]').value;
   var password = document.querySelector('input[name="password"]').value;

   // 执行表单提交时的操作
   console.log("用户名：" + username);
   console.log("密码：" + password);
});

在上面的代码中，通过document.getElementById("myForm")获取到表单元素，并使用addEventListener方法监听其submit事件。在事件处理器中，我们首先调用了event.preventDefault()方法来阻止表单的默认提交行为，然后通过document.querySelector方法获取到表单中输入框的值，并执行相应的操作（这里只是简单地使用console.log输出了用户名和密码）

这些是常见的JavaScript事件示例代码，你可以根据具体的需求和场景选择适合的事件类型和相应的处理函数。

总结JS中的常用事件

下面是一些常用的 JavaScript 事件和它们的描述：

事件	描述
click	当元素被点击时触发
mouseover	当鼠标移入元素时触发
mouseout	当鼠标移出元素时触发
keydown	当按下键盘上的任意键时触发
keyup	当释放键盘上的任意键时触发
load	当页面或图片加载完成时触发
scroll	当页面滚动时触发
focus	当元素获得焦点时触发
blur	当元素失去焦点时触发
submit	当提交表单时触发
input	当输入框的值发生变化时触发
change	当表单元素的值发生变化时触发
resize	当窗口大小改变时触发
error	当加载资源失败时触发

这些事件只是其中的一部分，JavaScript 提供了更多的事件类型，开发者可以根据具体需求选择合适的事件来响应用户操作。

总结不易，希望宝宝们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！如有问题，欢迎评论区批评指正😁

文章来源:https://blog.csdn.net/Jin_Xiang123/article/details/135330881
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！