JavaScript中事件有哪些类型？

htmljavascript

在JavaScript中，事件是用户或浏览器自身执行的某些动作的结果，这些动作可以被JavaScript捕获并作出响应。事件类型非常多样，涵盖了用户交互、页面加载、表单操作、鼠标和键盘活动等多个方面。以下是一些常见的事件类型及其简要说明：

  1. 用户交互事件

    • click：用户点击某个元素时触发。
    • dblclick：用户双击某个元素时触发。
    • mouseover：鼠标指针移动到某个元素上方时触发。
    • mouseout：鼠标指针从某个元素上移开时触发。
    • mousedown：鼠标按钮被按下时触发。
    • mouseup：鼠标按钮被释放时触发。
    • mousemove：鼠标指针在元素内部移动时触发。

  2. 表单事件

    • submit：表单提交时触发。
    • change：表单元素的值发生变化时触发（如输入框内容变化、选择框选项改变）。
    • focus：元素获得焦点时触发。
    • blur：元素失去焦点时触发。

  3. 页面事件

    • load：页面完全加载后触发。
    • unload：用户离开页面时触发（如点击链接、关闭窗口等）。
    • resize：浏览器窗口大小发生变化时触发。
    • scroll：用户滚动页面时触发。

  4. 键盘事件

    • keydown：用户按下键盘上的任意键时触发。
    • keypress：用户按下并释放键盘上的键时触发（注意：某些键可能不触发，如功能键）。
    • keyup：用户释放键盘上的键时触发。

  5. 触摸事件

    • touchstart：用户触摸屏幕时触发。
    • touchmove：用户手指在屏幕上滑动时触发。
    • touchend：用户手指从屏幕上移开时触发。

示例效果与源代码：

以下是一个网页示例，展示了如何使用JavaScript监听和处理click事件。

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>JavaScript 事件示例</title>  
  <style>  
        /* 添加一些样式以使示例更易于观察 */  
        .mouseTracker {  
            width: 40%;  
            height: 200px;  
            background-color: green;  
            text-align: center;  
            line-height: 200px; /* 使文本垂直居中 */  
            font-size: 24px;  
            margin-top: 20px;  
	    padding-left: 20px;
	    color: white;
        }  

        .btn {
        background: #304e80;
        width: 80px;
        height: 40px;
        border-radius: 4px;
        transition: all 0.4s;
        color: white;
        }
    </style>  
</head>  
<body>  
<div style="text-align:center; width: 40%;  ">
<h1>JavaScript 事件示例</h1>
<button id="myButton" class="btn" >百宝箱</button>  
</div> 
<div  id = "mouseTracker" class="mouseTracker"></div>  
  
<script>  
    // 获取按钮元素  
    var button = document.getElementById("myButton");  
  
    // 为按钮添加点击事件监听器  
    button.addEventListener("click", function() {  
        // 当按钮被点击时，更新p元素的内容  
        document.getElementById("mouseTracker").innerHTML = "又是美好的一天！";  
    });  
</script>  
  
</body>  
</html>

在这个示例中，我们创建了一个按钮和一个段落元素。然后，我们使用addEventListener方法为按钮添加了一个click事件监听器。当用户点击按钮时，会触发该监听器中的函数，该函数会更新段落元素的内容，显示“又是美好的一天！”。这个示例展示了如何在JavaScript中监听和处理用户交互事件。

上一篇：Canvas内部的坐标系简介

下一篇：在javascript中，什么是对象？