快捷導(dǎo)航

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

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

這篇文章主要介紹了JavaScript中常見(jiàn)的事件用法小結(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)離開(kāi)事件

案例：鼠標(biāo)進(jìn)入紅色，離開(kāi)藍(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="請(qǐng)輸入內(nèi)容" id="te">
<script>
    document.getElementById("te").onfocus = function () {
        document.getElementById("te").value = "";
    };
    document.getElementById("te").onblur = function () {
        document.getElementById("te").value = "請(qǐng)輸入內(nèi)容";
    };
</script>
</body>

四.onmousemove 鼠標(biāo)移動(dòng)事件

鼠標(biāo)移動(dòng)的時(shí)候就會(huì)觸發(fā)

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

<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)相對(duì)于頁(yè)面的可視區(qū)域的橫坐標(biāo)
        var x = e.clientX;
        //鼠標(biāo)相對(duì)于頁(yè)面的可視區(qū)域的縱坐標(biāo)
        var y = e.clientY;
        //div對(duì)象
        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)條滾動(dòng)事件

當(dāng)拖動(dòng)滾動(dòng)條的時(shí)候就會(huì)觸發(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("滾動(dòng)條被拖動(dòng)了");
    };
</script>
</body>

六. onkeydown / onkeyup 鍵盤(pán)按下/抬起事件

當(dāng)鍵盤(pán)按下或者抬起任意按鍵的時(shí)候觸發(fā)

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

七.keyCode 獲取按下的是哪個(gè)按鍵

<script>
    //頁(yè)面的任何的位置.按下鍵盤(pán),獲取按鍵的值
    document.onkeydown = function (e) {
        //console.log(e.keyCode);//事件參數(shù)對(duì)象
        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)左鍵或右鍵按下或者抬起的時(shí)候觸發(fā)

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

如果鼠標(biāo)比較高級(jí)，有其他按鍵的情況下，按下或抬起也會(huì)觸發(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>