JavaScript(js)处理的HTML事件、键盘事件、鼠标事件_html 在输入框中用外接扫描枪扫描后的script事件-优快云博客

本文链接：https://blog.youkuaiyun.com/xuehyunyu/article/details/76099400

本文提供了几个关于HTML和JavaScript事件处理的示例代码，包括输入框内容改变、按键按下和鼠标点击事件的监听与响应。

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

示例代码：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML文件</title>
    <script>
        window.onload=function () {
            var d=document.getElementById('d');
            //内容发生改变，并焦点发生改变，才可以监听到
            d.onchange=function () {
                alert('内容发生改变')
            }
        }
    </script>
</head>
<body>
<input type="text" id="d" value="">
</body>
</html>

键盘事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script>
        window.onload=function () {
            window.onkeypress=function (e) {
             //   alert(e.key)//弹出按键对应的字母
             //   alert(e.keyCode)
                if (e.charCode==103){
                    alert('G键被点击')
                }
            }
        }
    </script>
</head>
<body>

</body>
</html>

鼠标事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <script>
        window.onload=function () {
            var input=document.getElementById('b');
            input.onclick=function () {
                alert('按钮被点击了');
            }

            var c= document.getElementById('c');
            c.ondblclick=function () {
                alert('双击')
            }
        }
    </script>
</head>
<body>
<input type="button" id="b" value="点击">
<input type="button" id="c" value="双击">
</body>
</html>