快捷導(dǎo)航

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

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

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

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

案例：點(diǎn)擊按鈕彈框

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

二.onmouseover 鼠標(biāo)進(jìn)入事件與onmouseout鼠標(biāo)離開事件

案例：鼠標(biāo)進(jìn)入紅色，離開藍(lán)色（放上去就可以，不用點(diǎn)擊）

<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 獲取焦點(diǎn)事件與onblur 失去焦點(diǎn)事件

案例：文本框

<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 鼠標(biāo)移動事件

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

案例：div 跟著鼠標(biāo)移動

<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) {
        //鼠標(biāo)相對于頁面的可視區(qū)域的橫坐標(biāo)
        var x = e.clientX;
        //鼠標(biāo)相對于頁面的可視區(qū)域的縱坐標(biāo)
        var y = e.clientY;
        //div對象
        var dvobj = document.getElementById("dv");
        //設(shè)置div的橫坐標(biāo)
        dvobj.style.left = x + "px";
        //設(shè)置div的縱坐標(biāo)
        dvobj.style.top = y + "px";
    };
</script>
</body>

五.onscroll 滾動條滾動事件

當(dāng)拖動滾動條的時候就會觸發(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 鍵盤按下/抬起事件

當(dāng)鍵盤按下或者抬起任意按鍵的時候觸發(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 鼠標(biāo)按下/抬起事件

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

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

如果鼠標(biāo)比較高級，有其他按鍵的情況下，按下或抬起也會觸發(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("鼠標(biāo)按下了");
    };
    document.getElementById("dv").onmouseup = function () {
        console.log("鼠標(biāo)抬起了");
    };
</script>
</body>