快捷導(dǎo)航

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

更新時間：2024年10月14日 10:36:12 作者：千帆過盡皆不是

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

一. HTML DOM 事件

什么是事件？

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

單擊事件
雙擊事件
鼠標(biāo)劃入
鼠標(biāo)劃出
鼠標(biāo)懸停
某個鍵盤被按下
某個鍵盤被松開

1.1 鼠標(biāo)事件

onclick	在對象被點擊的時候發(fā)生
ondblclick	在對象被雙擊的時候發(fā)生
onmousedown	在鼠標(biāo)被按下的時候發(fā)生
onmouseup	在鼠標(biāo)被松開的時候發(fā)生
onmousemove	在鼠標(biāo)被移動的時候發(fā)生
onmouseover	在鼠標(biāo)指針被移動到指定元素的時候發(fā)生
onmouseout	在鼠標(biāo)指針被移出到指定元素的時候發(fā)生

1.2 鍵盤事件

onkeydown	鍵盤被按下的時候觸發(fā)事件
onkeypress	在鍵盤按下一個鍵，然后再松開的時候會觸發(fā)
onkeyup	當(dāng)鍵盤上的一個鍵被松開的時候會觸發(fā)

1.3 表單事件

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

1.4 其他相對常見的事件

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

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

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

2.1 語法知識

element.addEventListener(event, function, useCapture)

event：

必須填寫不可省略。

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

function：

必須填寫不可省略。

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

useCapture:

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

true ：使用事件捕獲

false ：使用事件冒泡

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

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

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>測試</title>
</head>
<body>
    <button id="btn">測試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "測試成功";
    }
</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>測試</title>
</head>
<body>
    <button id="btn">測試按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("demo").innerHTML = "測試成功";
    });
</script>
</html>

2.2.2 向一個元素添加多個事件處理程序

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

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

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

2.2.3 向一個元素添加多個相同類型的事件處理程序

需要打開控制臺查看結(jié)果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試</title>
</head>
<body>
    <button id="btn">測試按鈕</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)點擊")
    }

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

2.2.4 監(jiān)測window 對象

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

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

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

    document.getElementById("myP2").addEventListener("click", function() 
    {
        alert("你點擊了 P 元素!");
    }, true);
    
    document.getElementById("myDiv2").addEventListener("click", function() 
    {
        alert("你點擊了 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>測試</title>
</head>
<body>
    <button id="btn">測試按鈕</button>
    <br>
    <br>
    <button onclick="shut()">關(guān)閉監(jiān)測按鈕</button>
    <p id="demo"></p>
</body>
<script>
    document.getElementById("btn").addEventListener("click",DEMO);
    
    function DEMO(){
        document.getElementById("demo").innerHTML = "測試成功";
        alert("測試成功")
    }
    
    function shut(){
        document.getElementById("btn").removeEventListener("click", DEMO);
        document.getElementById("demo").innerHTML = "";
        alert("監(jiān)測關(guān)閉，顯示內(nèi)容為空,再次點擊測試按鈕沒有反應(yīng)")
    }

</script>
</html>

三. 小探討

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

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

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

您可能感興趣的文章: