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

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

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

一. HTML DOM 事件

什么是事件？

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

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

1.1 鼠標事件

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

1.2 鍵盤事件

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

1.3 表單事件

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

1.4 其他相對常見的事件

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

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

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

2.1 語法知識

element.addEventListener(event, function, useCapture)

event：

必須填寫不可省略。

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

function：

必須填寫不可省略。

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

useCapture:

可以省略不寫，默認值是 false

true ：使用事件捕獲

false ：使用事件冒泡

2.2 addEventListener() 方法的性質

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

2.2.1 使用外部函數與隱函數

使用外部函數

<!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>

使用隱函數

<!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("第一個函數測試成功")
    }

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

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

需要打開控制臺查看結果。

<!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","鼠標移入")
    }

    function DEMO(){
        console.log("click","鼠標點擊")
    }

    function myFunctionOut(){
        console.log("mouseout","鼠標移出")
    }
</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 捕獲與冒泡

冒泡：從內到外

捕獲：從外到內

<!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()">關閉監(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)測關閉，顯示內容為空,再次點擊測試按鈕沒有反應")
    }

</script>
</html>