js的常用事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qiu7qiu7/article/details/71304856

本文详细介绍了HTML中的常见事件，包括元素获得焦点(onfocus)、失去焦点(onblur)、内容改变(onchange)、鼠标点击(onclick)及双击(ondblclick)等事件，并通过实例展示了这些事件如何应用于实际场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.
onblur 元素失去焦点
onfocus 元素获得焦点

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{margin: 10px;}
        .focus{background-color: yellow;}
        .blur{background-color: white;}
    </style>
</head>
<body>
    <input type="text"  onfocus="className='focus'" onblur="className='blur'"><br>
    <input type="text"  onfocus="className='focus'" onblur="className='blur'"><br>
    <input type="text"  onfocus="className='focus'" onblur="className='blur'"><br>
    <input type="text"  onfocus="className='focus'" onblur="className='blur'"><br>
</body>
</html>

2.
onchange 用户改变域的内容
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{margin: 10px; }
        .change{background-color: red;}
    </style>
</head>
<body>
    <input type="text" value="abc" onchange="className='change'"><br>
    <input type="text" value="def" onchange="className='change'"><br>
</body>
</html>

3.
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{width: 200px;height: 200px;border: solid;}
        .dblclick{background-color: red;}
        .click{background-color: blue;}
    </style>
</head>
<body>
    <input type="button" value="点击一次变蓝，点击两次变红"  onclick="document.getElementById('div1').className='click'" ondblclick="document.getElementById('div1').className='dblclick'">
    <div id="div1"></div>
</body>
</html>

4.
onload 某个页面或图像被完成加载
常用于window.onload，放在head标签内表示当整个页面加载完成后在执行，避免找不到加载资源的情况。

5.
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{width: 200px;height: 200px;border: solid;}
        .over{background-color: red;}
        .out{background-color: blue;}
    </style>
</head>
<body>
    <div id="div1" onmouseout ="document.getElementById('div1').className='out'" onmouseover ="document.getElementById('div1').className='over'">放上为红，移开为蓝</div>
</body>
</html>