欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)相同類型的事件處理程序。
  • 向一個(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è)相同類型的事件處理程序

需要打開(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)稱呼具有示范或展示功能及意味的事物。

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

相關(guān)文章

最新評(píng)論