首页 > 代码库 > JS学习记录（事件）

JS学习记录（事件）

2024-11-20 22:20:02   203人阅读

鼠标事件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onm ousedown="myMouseDown()" onm ouseup="myMouseUp()">鼠标按下和抬起</button>
<button onm ouseover="myMouseOver()" onm ouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onm ousemove="myMouseMove()">鼠标移动</button>
<button onm ouseenter="myMouseEnter()" onm ouseleave="myMouseLeave()">鼠标进入和离开</button>
</body>
<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {

        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }

</script>
</html>

结果图：根据按钮得到相应效果

 

键盘事件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
</body>
<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>
</html>

 

结果图：

技术分享

 

JS学习记录（事件）


联系
我们