js的常用事件

最新推荐文章于 2023-12-09 13:49:11 发布

凤戏花丛

最新推荐文章于 2023-12-09 13:49:11 发布

阅读量438

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qiu7qiu7/article/details/71304856

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

凤戏花丛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js的常用事件

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="
复制链接

扫一扫

专栏目录