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

HTML DOM 使 JavaScript 有能力对 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>

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


<html>
<body>

<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
下面通过代码来介绍:


<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>

你可能感兴趣的:(JS中的点击事件与键盘事件)