18-常用的事件

最新推荐文章于 2024-06-29 11:18:05 发布

xixihaha_coder

最新推荐文章于 2024-06-29 11:18:05 发布

阅读量143

点赞数 1

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

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/119115327

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

常用的事件

onload 加载完成事件:       	页面加载完成之后,常用于做页面js代码初始化操作
onclick单击事件:			  常用于按钮的点击响应操作。
onblur失去焦点事件:			常用用于输入框失去焦点后验证其输入内容是否合法。
onchange内容发生改变事件:	   常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件:			常用于表单提交前,验证所有表单项是否合法。

onclick单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.onload = function () {
        let but1 = document.getElementById('but1');
        but1.onclick = function () {
            alert("onclick事件")
        }

    }
</script>
<body>
<button id="but1">按钮</button>
</body>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function a() {
        console.log("失去焦点事件")
    }
</script>
<body>
用户名：<input type="text" onblur="a();"> <br>
密码：<input type="password" id="password">
</body>
</html>

onchange内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function a() {
        alert("女神改变")
    }
</script>
<body>
<select onchange="a()" >
    <option>女神1</option>
    <option>女神2</option>
    <option>女神3</option>
</select>
</body>
</html>