快捷導(dǎo)航

JavaScript中常見的事件用法小結(jié)

更新時間：2023年05月16日 00:17:22 作者：碼仙

這篇文章主要介紹了JavaScript中常見的事件用法小結(jié),需要的朋友可以參考下

一.onclick() 鼠標左鍵單擊事件

案例：點擊按鈕彈框

<body>
<input type="button" value="按鈕" id="btn">
<script>
    document.getElementById("btn").onclick = function () {
        alert("點擊了");
    };
</script>
</body>

二.onmouseover 鼠標進入事件與onmouseout鼠標離開事件

案例：鼠標進入紅色，離開藍色（放上去就可以，不用點擊）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.getElementById("dv").onmouseover = function () {
        document.getElementById("dv").style.backgroundColor = "red";
    };
    document.getElementById("dv").onmouseout = function () {
        document.getElementById("dv").style.backgroundColor = "";
    };
</script>
</body>

三.onfocus 獲取焦點事件與onblur 失去焦點事件

案例：文本框

<body>
<input type="text" value="請輸入內(nèi)容" id="te">
<script>
    document.getElementById("te").onfocus = function () {
        document.getElementById("te").value = "";
    };
    document.getElementById("te").onblur = function () {
        document.getElementById("te").value = "請輸入內(nèi)容";
    };
</script>
</body>

四.onmousemove 鼠標移動事件

鼠標移動的時候就會觸發(fā)

案例：div 跟著鼠標移動

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.onmousemove = function (e) {
        //鼠標相對于頁面的可視區(qū)域的橫坐標
        var x = e.clientX;
        //鼠標相對于頁面的可視區(qū)域的縱坐標
        var y = e.clientY;
        //div對象
        var dvobj = document.getElementById("dv");
        //設(shè)置div的橫坐標
        dvobj.style.left = x + "px";
        //設(shè)置div的縱坐標
        dvobj.style.top = y + "px";
    };
</script>
</body>

五.onscroll 滾動條滾動事件

當拖動滾動條的時候就會觸發(fā)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="dv">
    碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙碼仙
</div>
<script>
    document.getElementById("dv").onscroll = function () {
        console.log("滾動條被拖動了");
    };
</script>
</body>

六. onkeydown / onkeyup 鍵盤按下/抬起事件

當鍵盤按下或者抬起任意按鍵的時候觸發(fā)

<body>
<input type="text" id="txt">
<script>
    document.getElementById("txt").onkeydown = function () {
        console.log("鍵盤按下了");
    };
    document.getElementById("txt").onkeyup = function () {
        console.log("鍵盤抬起了");
    };
</script>
</body>

七.keyCode 獲取按下的是哪個按鍵

<script>
    //頁面的任何的位置.按下鍵盤,獲取按鍵的值
    document.onkeydown = function (e) {
        //console.log(e.keyCode);//事件參數(shù)對象
        switch (e.keyCode) {
            case 81:
                console.log("您按下的是Q");
                break;
            case 87:
                console.log("您按下的是W");
                break;
            case 69:
                console.log("您按下的是E");
                break;
            case 82:
                console.log("您按下的是R");
                break;
        }
    };
</script>

八. onmousedown / onmouseup 鼠標按下/抬起事件

當鼠標左鍵或右鍵按下或者抬起的時候觸發(fā)

按下或抬起滾動輪也會觸發(fā)，滑動滾動輪不能觸發(fā)

如果鼠標比較高級，有其他按鍵的情況下，按下或抬起也會觸發(fā)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.getElementById("dv").onmousedown = function () {
        console.log("鼠標按下了");
    };
    document.getElementById("dv").onmouseup = function () {
        console.log("鼠標抬起了");
    };
</script>
</body>