JS中的点击事件与键盘事件

最新推荐文章于 2024-09-25 17:14:42 发布

江玉郎

最新推荐文章于 2024-09-25 17:14:42 发布

阅读量4.6k

点赞数 2

文章标签： JS 点击键盘

本文链接：https://blog.csdn.net/qq_39610888/article/details/82153627

版权

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

一点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击事件</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // var div = document.getElementsByTagName('div')[0]
        var div = document.querySelector('div')

        // div 被点击的时候调用
        div.onclick = function(){
            alert('div 被点击了')
        }

        // double ，div 标签被双击的时候调用
        div.ondblclick = function(){
            alert('div 被双击了')
        }

        div.onmousedown = function(){
            console.log('鼠标按下')
        }

        div.onmouseup = function(){
            console.log('鼠标弹上')
        }

        div.onclick = function(){
            console.log('鼠标点击')
        }

        div.onmouseenter = function(){
            console.log('进入')
        }

        div.onmouseleave = function(){
            console.log('离开')
        }



        // over 在...之上
        div.onmouseover = function(){
            console.log('over')
        }
        // out  和上面的over 是相对的
        div.onmouseout = function(){
            console.log('out')
        }

        div.onmousemove = function(e){
            console.log('move')
            console.log('X:' + e.pageX + ',Y:' + e.pageY)
        }

        div.onmousewheel = function(e){
            // 水平方向的滚动距离
            console.log(e.deltaX)
            // 垂直方向的滚动距离 正值往下 负值往上
            console.log(e.deltaY)
        }
    </script>
</body>
</html>

以上是对点击事件进行的一个笼统的说明，下面举一个简单的例子进行详细说明
用法

<!DOCTYPE html>
<html>
<body>
<!-- onmouseover 这种为固定值用法，后面跟着 函数名字， 在<script>里调用 this 表示参数，这里写了，function里面也要写 -->
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
    var div = document.querySelector('div')
function mOver(div)
{
div.innerHTML="谢谢"
}

function mOut(div)
{
div.innerHTML="把鼠标移到上面"
}
</script>
</body>
</html>

二键盘事件

键盘事件主要是三种：onkeydown, onkeyup, onkeypress
下面通过代码来介绍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件</title>
</head>
<body>
    <script>
        window.onkeydown = function(e){
            console.log(e.key)
            console.log(e.keyCode)
            if(e.keyCode == 87){
                console.log('往前走')
            }
            else if(e.keyCode == 65){
                console.log('往左走')
            }
            if(e.keyCode == 65 && e.ctrlKey){
                console.log('全选')
            }
            if(e.keyCode == 66 && e.ctrlKey && e.altKey){
                console.log('随便')
            }
        } 

        window.onkeyup = function(){
            console.log('弹上')
        }
        window.onkeypress = function(){
            console.log('按压')
        }

    </script>
</body>
</html>