JavaScript 中的三种常用事件

小雪_Snow2026-07-15 17:31

JavaScript 中的三种常用事件

一、鼠标点击事件

鼠标点击是最常见的一类用户交互，JS 提供了两个核心的点击事件：

1. onclick --- 单击事件

当用户单击（按下并释放）某个元素时触发。

html 复制代码

<input type="button" value="单击我" onclick="handleClick()" />

<script>
    function handleClick() {
        alert("你单击了按钮！");
    }
</script>

2. ondblclick --- 双击事件

当用户快速连续点击两次时触发。

html 复制代码

<input type="button" value="双击我" ondblclick="handleDoubleClick()" />

<script>
    function handleDoubleClick() {
        alert("你双击了按钮！");
    }
</script>

二、焦点事件

焦点事件在用户与表单元素（输入框、下拉框等）交互时触发，常用于输入提示、表单验证等场景。

1. onfocus --- 获得焦点

当元素获得焦点时触发。比如用户点击输入框、或用 Tab 键切换到该元素。

html 复制代码

<input type="text" id="username" placeholder="请输入用户名" />

<script>
    document.getElementById("username").onfocus = function() {
        console.log("输入框获得了焦点");
    };
</script>

2. onblur --- 失去焦点

当元素失去焦点时触发。比如用户点击页面其他位置、或切换到其他输入框。

html 复制代码

<input type="text" id="username" placeholder="请输入用户名" />

<script>
    document.getElementById("username").onblur = function() {
        console.log("输入框失去了焦点");
    };
</script>

三、改变事件

onchange --- 内容改变事件

当元素的值发生改变且失去焦点后 触发。常用于下拉框（<select>）、复选框、输入框等。

html 复制代码

<select id="city" onchange="selectCity()">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<script>
    function selectCity() {
        var city = document.getElementById("city").value;
        alert("你选择了：" + city);
    }
</script>