JS学习记录（事件）-CSDN博客

鼠标事件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<button οnclick="myClick()">鼠标单击</button>
<button οndblclick="myDBClick()">鼠标双击</button>
<button οnmοusedοwn="myMouseDown()" οnmοuseup="myMouseUp()">鼠标按下和抬起</button>
<button οnmοuseοver="myMouseOver()" οnmοuseοut="myMouseOut()">鼠标悬浮和离开</button>
<button οnmοusemοve="myMouseMove()">鼠标移动</button>
<button οnmοuseenter="myMouseEnter()" οnmοuseleave="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" οnkeydοwn="myKeyDown(this.id)" οnkeyup="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>