HTML之JavaScript常见事件

录大大i2025-02-18 10:31
HTML之JavaScript常见事件

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行
            事件的三要素：事件源、事件、事件处理程序
            事件的绑定：
            1.通过元素的属性绑定 on***
            2.通过DOM编程动态绑定
            注：
                1.一个事件可以绑定多个函数；eg：onclick="show(),show1()
                2.一个元素可以绑定多个事件  eg：onclick="show()" ondblclick="show2()"

            常见的事件：
            1.鼠标事件
                onclick：单击事件
                ondblclick：双击事件
                onmouseover：鼠标移入事件
                onmouseout：鼠标移出事件
                onmousemove：鼠标移动事件
                onmousedown：鼠标按下事件
                onmouseup：鼠标抬起事件
            2.键盘事件
                onkeydown：键盘按下事件
                onkeyup：键盘抬起事件
                onkeypress：键盘按下并抬起事件
            3.表单事件
                onfocus：获得焦点事件
                onblur：失去焦点事件
                onchange：内容改变事件
                onsubmit：表单提交事件
                onreset：表单重置事件
            
        */
        function show() {
            console.log('hello,按下');
        };
        function show1() {
            console.log('hello1,抬起');
        };
        function show2() {
            console.log('双击');
        };
        function show3() {
            console.log('鼠标移入');
        };
        function show4() {
            console.log('鼠标移出');
        };
        function show5() {
            console.log('鼠标移动');
        };
    </script>
</head>

<body>
    <input type="button" value="按钮" onclick="show(),show1()" ondblclick="show2()">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="" onmouseover="show3()" onmouseout="show4()" onmousemove="show5()">
    <input type="text" onkeydown="show()" onkeyup="show1()">
</body>

</html>