Javascript的事件(窗口事件、鼠标事件、键盘事件、表单事件)

最新推荐文章于 2024-01-22 21:17:21 发布

CoolBoy1314_

最新推荐文章于 2024-01-22 21:17:21 发布

阅读量198

点赞数 1

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/CoolBoy1314_/article/details/132305077

版权

1.窗口事件

事件名	描述
onload	窗体内容被加载
onunload	窗体内容卸载
onbeforeunload	窗体内容卸载前
onresize	窗体大小发生变化
onscroll	窗口内部发生滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 1500px">
<div style="height: 300px;width: 300px;border: 1px solid black">
</div>
</body>
<script>
    //onload事件
    window.onload = function () {
        alert("窗体打开");
    }
    //onunload事件
    window.onunload = function () {
        //由于浏览器设置不同，此事件可能并不总是按预期工作。(不常用)
        alert("窗体关闭");
    }
    //onbeforeunload事件
    window.onbeforeunload = function () {
        //由于浏览器设置不同，此事件也可能并不总是按预期工作。(不常用)
        alert("窗体关闭前");
    }
    //onresize事件
    window.onresize = function () {
        //window.outerHeight表示窗体的高
        //window.outerWidth表示窗体的宽
        console.log("高" + window.outerHeight + "宽" + window.outerWidth);
    }
    //onscroll事件
    window.onscroll = function () {
        console.log("你滑动了窗体");
    }
</script>
</html>

2.鼠标事件

事件名	描述
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmouseenter	鼠标进入事件
onmouseleave	鼠标离开事件
onmousedown	鼠标按下事件
onmouseup	鼠标抬起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" id="button1" style="width: 150px;height: 60px;background-color: pink" value="按钮">
    <input type="button" id="button2" style="width: 150px;height: 60px;background-color: palegoldenrod" value="按钮">
</div>
</body>
<script>
    let b1 = document.getElementById("button1");
    let b2 = document.getElementById("button2");
    //onclick事件
    b1.onclick = function () {
        console.log("你点击了按钮1")
    }
    //ondblclick事件
    b2.ondblclick = function () {
        console.log("你双击了按钮2")
    }
    //onmouseover事件
    b1.onmouseover = function () {
        console.log("你进入了按钮1")
    }
    //onmouseout事件
    b1.onmouseout = function () {
        console.log("你移出了按钮1")
    }
    //onmouseenter事件
    b2.onmouseenter = function () {
        console.log("你进入了按钮2")
    }
    //onmouseleave事件
    b2.onmouseleave = function () {
        console.log("你移出了按钮2")
    }
    //onmousedown事件
    b2.onmousedown = function () {
        console.log("你在按钮2按下了鼠标")
    }
    //onmouseup事件
    b2.onmouseup = function () {
        console.log("你在按钮2松开的鼠标")
    }

</script>
</html>

3.键盘事件

事件名	描述
onkeydown	按键按下
onkeyup	按键抬起事件
onkeypress(淘汰)	按键按压事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label><input type="text" id="text"></label>
</body>
<script>
    let t = document.getElementById("text");
    //onkeydown事件
    t.onkeydown = function () {
        console.log("键盘按下")
    }
    //onkeyup事件
    t.onkeyup = function () {
        console.log("键盘抬起")
    }
    //onkeypress事件()
    t.onkeypress = function () {
        console.log("键盘按下")
    }
</script>
</html>

4.表单事件

事件名	描述
onchange	内容发生改变事件
onselect	内容选中事件
onblur	失去焦点
onfocus	获得焦点
onsubmit	表单提交事件
onreset	表单重置事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" id="f">
    <input type="text" name="text" id="text">
    <input type="submit" id="button" value="登录">
    <input type="reset" id="button1" value="重置">
</form>
</body>
<script>
    //onsubmit事件
    //获取表单元素并绑定事件
    document.getElementById('f').addEventListener('submit', function (e) {
        //获取到表单中text是否有值
        let text = this.text.value;
        //如果存在具体的值才进行提交
        if (text.length < 1) {
            // 阻止事件的默认行为（表单的默认行为:提交并跳转）
            e.preventDefault();
            alert("请输入值");
        }
    })
    //onchange事件
    document.getElementById('text').addEventListener('change', function () {
        console.log("内容改变了");
    })
    //onselect事件(是选中里面的内容才会触发)
    document.getElementById('text').addEventListener('select', function () {
        console.log("文本框中内容被选中啦");
    })
    //onfocus事件
    document.getElementById('text').addEventListener('focus', function () {
        console.log("文本框获得焦点");
    })
    //onblur事件
    document.getElementById('text').addEventListener('blur', function () {
        console.log("文本框失去焦点");
    })
    //onreset事件
    document.getElementById('f').addEventListener('reset', function () {
        alert("文本框重置啦");
    })
</script>
</html>