快捷導(dǎo)航

JavaScript事件監(jiān)聽(tīng)器addEventListener()方法和一些基本事件詳解

更新時(shí)間：2024年10月14日 10:36:12 作者：千帆過(guò)盡皆不是

這篇文章主要介紹了JavaScript事件監(jiān)聽(tīng)器addEventListener()方法和一些基本事件,這篇文章主要介紹了JavaScript事件監(jiān)聽(tīng)器addEventListener()方法和一些基本事件的相關(guān)資料,需要的朋友可以參考下

一. HTML DOM 事件

什么是事件？

事件是在編譯的過(guò)程中發(fā)生的事情，當(dāng)事件發(fā)生的時(shí)候計(jì)算機(jī)可以自動(dòng)采取某種行動(dòng)（即運(yùn)行一些代碼，通常是我們所制定的函數(shù)）。常見(jiàn)的事件有：

單擊事件
雙擊事件
鼠標(biāo)劃入
鼠標(biāo)劃出
鼠標(biāo)懸停
某個(gè)鍵盤(pán)被按下
某個(gè)鍵盤(pán)被松開(kāi)

1.1 鼠標(biāo)事件

onclick	在對(duì)象被點(diǎn)擊的時(shí)候發(fā)生
ondblclick	在對(duì)象被雙擊的時(shí)候發(fā)生
onmousedown	在鼠標(biāo)被按下的時(shí)候發(fā)生
onmouseup	在鼠標(biāo)被松開(kāi)的時(shí)候發(fā)生
onmousemove	在鼠標(biāo)被移動(dòng)的時(shí)候發(fā)生
onmouseover	在鼠標(biāo)指針被移動(dòng)到指定元素的時(shí)候發(fā)生
onmouseout	在鼠標(biāo)指針被移出到指定元素的時(shí)候發(fā)生

1.2 鍵盤(pán)事件

onkeydown	鍵盤(pán)被按下的時(shí)候觸發(fā)事件
onkeypress	在鍵盤(pán)按下一個(gè)鍵，然后再松開(kāi)的時(shí)候會(huì)觸發(fā)
onkeyup	當(dāng)鍵盤(pán)上的一個(gè)鍵被松開(kāi)的時(shí)候會(huì)觸發(fā)

1.3 表單事件

onblur	元素失去焦點(diǎn)時(shí)觸發(fā)
onfocus	元素獲取焦點(diǎn)時(shí)觸發(fā)
oninput	元素獲取用戶輸入時(shí)觸發(fā)
onreset	表單重置時(shí)觸發(fā)
onselect	用戶選取文本時(shí)觸發(fā) (比如 <input> 和 <textarea> 中的內(nèi)容)
onsubmit	表單提交時(shí)觸發(fā)

1.4 其他相對(duì)常見(jiàn)的事件

onscroll	指定元素滑輪發(fā)生滾動(dòng)的時(shí)候會(huì)觸發(fā)事件
onresize	窗口或框架被重新調(diào)整大小。
onchange	該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)( <input>, <keygen>, <select>, 和 <textarea>)

二. addEventListener() 方法的介紹和使用

addEventListener() 方法用于向指定元素添加事件句柄。當(dāng)計(jì)算機(jī)屬性檢測(cè)到事件發(fā)生的時(shí)候，運(yùn)行一些代碼，通常是我們所制定的函數(shù)。

2.1 語(yǔ)法知識(shí)

element.addEventListener(event, function, useCapture)

event：

必須填寫(xiě)不可省略。

注意: 在 addEventListener() 方法中不能使用 "on" 前綴，會(huì)報(bào)錯(cuò)。例如，我們要使用 "click" ,而不是使用 "onclick"。

function：

必須填寫(xiě)不可省略。

事件發(fā)生時(shí)運(yùn)行的函數(shù)。

useCapture:

可以省略不寫(xiě)，默認(rèn)值是 false

true ：使用事件捕獲

false ：使用事件冒泡

2.2 addEventListener() 方法的性質(zhì)

可以使用外部函數(shù)，也可以使用隱函數(shù)
向一個(gè)元素添加多個(gè)相同類(lèi)型的事件處理程序。
向一個(gè)元素添加多個(gè)事件處理程序
可以向任何 DOM 對(duì)象添加事件處理程序而非僅僅 HTML 元素，例如 window 對(duì)象。
可以對(duì)事件進(jìn)行冒泡或者捕獲
可以被刪除。（removeEventListener() 方法刪除事件監(jiān)聽(tīng)器）

2.2.1 使用外部函數(shù)與隱函數(shù)

使用外部函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "測(cè)試成功";
    }
</script>
</html>

使用隱函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "測(cè)試成功";
    });
</script>
</html>

2.2.2 向一個(gè)元素添加多個(gè)事件處理程序

addEventListener() 方法允許向相同元素添加多個(gè)事件，同時(shí)不覆蓋已有事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    document.getElementById("btn").addEventListener("click",myFunction);
    
    function DEMO(){
        alert("第一個(gè)函數(shù)測(cè)試成功")
    }

    function myFunction(){
        alert("第二個(gè)函數(shù)測(cè)試成功")
    }
</script>
</html>

2.2.3 向一個(gè)元素添加多個(gè)相同類(lèi)型的事件處理程序

需要打開(kāi)控制臺(tái)查看結(jié)果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    let btn =  document.getElementById("btn");
    btn.addEventListener("mouseover", myFunctionOver);
    btn.addEventListener("click", DEMO);
    btn.addEventListener("mouseout", myFunctionOut);

    function myFunctionOver(){
        console.log("mouseover","鼠標(biāo)移入")
    }

    function DEMO(){
        console.log("click","鼠標(biāo)點(diǎn)擊")
    }

    function myFunctionOut(){
        console.log("mouseout","鼠標(biāo)移出")
    }
</script>
</html>

2.2.4 監(jiān)測(cè)window 對(duì)象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = "頁(yè)面寬度或者高度改變";
    });
</script>
</html>

2.2.5 捕獲與冒泡

冒泡：從內(nèi)到外

捕獲：從外到內(nèi)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>

    <style>
        div 
        {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="myDiv">
        <p id="myP">點(diǎn)擊該段落， 我是冒泡</p>
    </div><br>
    <div id="myDiv2">
        <p id="myP2">點(diǎn)擊該段落， 我是捕獲</p>
    </div>
</body>
<script>
   document.getElementById("myP").addEventListener("click", function() 
    {
        alert("你點(diǎn)擊了 P 元素!");
    }, false);

    document.getElementById("myDiv").addEventListener("click", function()
    {
        alert("你點(diǎn)擊了 DIV 元素!");
    }, false);

    document.getElementById("myP2").addEventListener("click", function() 
    {
        alert("你點(diǎn)擊了 P 元素!");
    }, true);
    
    document.getElementById("myDiv2").addEventListener("click", function() 
    {
        alert("你點(diǎn)擊了 DIV 元素!");
    }, true);
</script>
</html>

2.2.6 可以被刪除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測(cè)試</title>
</head>
<body>
    <button id="btn">測(cè)試按鈕</button>
    <br>
    <br>
    <button onclick="shut()">關(guān)閉監(jiān)測(cè)按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "測(cè)試成功";
        alert("測(cè)試成功")
    }
    
    function shut(){
        document.getElementById("btn").removeEventListener("click", DEMO);
        document.getElementById("demo").innerHTML = "";
        alert("監(jiān)測(cè)關(guān)閉，顯示內(nèi)容為空,再次點(diǎn)擊測(cè)試按鈕沒(méi)有反應(yīng)")
    }

</script>
</html>

三. 小探討

如果大家有興趣的話，可以自己測(cè)試一下 addEventListener() 方法的傳參效果。

PS：DEMO是"demonstration"的縮寫(xiě)。DEMO的中文含意為“示范”、“展示”、“樣片”、“樣稿”、“原型”，常被用來(lái)稱(chēng)呼具有示范或展示功能及意味的事物。

到此這篇關(guān)于JavaScript事件監(jiān)聽(tīng)器addEventListener()方法和一些基本事件詳解的文章就介紹到這了,更多相關(guān)JS事件監(jiān)聽(tīng)器addEventListener()方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: