window.addEventListener 是 JavaScript 中的一個(gè)方法，用于向指定對(duì)象（在這個(gè)情況下是 window 對(duì)象，代表瀏覽器窗口）添加事件監(jiān)聽(tīng)器，以便在該對(duì)象上發(fā)生特定事件時(shí)執(zhí)行相應(yīng)的函數(shù)（稱為事件處理函數(shù)或事件監(jiān)聽(tīng)器）。

這個(gè)方法接受三個(gè)參數(shù)：

• 事件類型（type）：一個(gè)字符串，表示要監(jiān)聽(tīng)的事件類型。例如，"click" 表示鼠標(biāo)點(diǎn)擊事件，"load" 表示頁(yè)面加載完成事件等。
• 事件處理函數(shù)（listener）：當(dāng)事件發(fā)生時(shí)，要調(diào)用的函數(shù)。這個(gè)函數(shù)會(huì)接收到一個(gè)事件對(duì)象作為參數(shù)，該對(duì)象包含了事件的所有信息，比如觸發(fā)事件的元素、事件類型等。
• 使用捕獲或冒泡的布爾值（options/useCapture）（可選）：一個(gè)布爾值，用于指定事件是在捕獲階段還是在冒泡階段執(zhí)行。默認(rèn)值為 false，表示在冒泡階段執(zhí)行。
• 在 DOM 事件流中，事件首先經(jīng)過(guò)捕獲階段，然后到達(dá)目標(biāo)元素，最后經(jīng)過(guò)冒泡階段。如果你希望事件在捕獲階段就觸發(fā)，可以將這個(gè)參數(shù)設(shè)置為 true。

示例

以下是一個(gè)使用 window.addEventListener 監(jiān)聽(tīng)頁(yè)面加載完成事件的示例：

window.addEventListener('load', function() {
    console.log('頁(yè)面加載完成！');
});

在這個(gè)例子中，當(dāng)頁(yè)面加載完成時(shí)（即所有資源如圖片、樣式表等都被加載和解析完成后），控制臺(tái)會(huì)輸出 "頁(yè)面加載完成！"。

移除事件監(jiān)聽(tīng)器

如果你想在某個(gè)時(shí)刻移除之前添加的事件監(jiān)聽(tīng)器，可以使用 removeEventListener 方法。但是，需要注意的是，你必須提供與添加監(jiān)聽(tīng)器時(shí)完全相同的函數(shù)引用，因?yàn)?removeEventListener 是通過(guò)引用匹配來(lái)移除監(jiān)聽(tīng)器的。

注意事項(xiàng)

• 如果為同一個(gè)事件多次添加同一個(gè)監(jiān)聽(tīng)器，這些監(jiān)聽(tīng)器都會(huì)被調(diào)用。
• 使用 addEventListener 添加的事件監(jiān)聽(tīng)器，需要使用 removeEventListener 來(lái)手動(dòng)移除，否則它們會(huì)一直存在直到頁(yè)面被卸載。
• 在使用 addEventListener 時(shí)，盡量避免在全局作用域（如直接在 <script> 標(biāo)簽中）中定義事件處理函數(shù)，因?yàn)檫@樣做會(huì)增加全局命名空間的污染，并且可能導(dǎo)致函數(shù)難以在需要時(shí)被移除。相反，應(yīng)該使用函數(shù)表達(dá)式或箭頭函數(shù)來(lái)定義事件處理函數(shù)。

當(dāng)然可以，以下是一些使用 window.addEventListener 的實(shí)際案例，這些案例將幫助你更好地理解這個(gè)方法在實(shí)際開(kāi)發(fā)中的應(yīng)用。

實(shí)例1. 監(jiān)聽(tīng)頁(yè)面加載完成事件

當(dāng)頁(yè)面完全加載（包括所有依賴的資源，如圖片、樣式表等）后，你可能想要執(zhí)行一些初始化操作，比如發(fā)送統(tǒng)計(jì)信息、初始化UI組件等。這時(shí)，你可以使用 window.addEventListener 來(lái)監(jiān)聽(tīng) load 事件。

window.addEventListener('load', function() {
    console.log('頁(yè)面加載完成，可以執(zhí)行初始化操作了！');
    // 在這里執(zhí)行初始化操作
});

實(shí)例2. 監(jiān)聽(tīng)窗口大小變化事件

在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，你可能需要根據(jù)窗口的大小來(lái)調(diào)整布局或樣式。這時(shí)，你可以使用 window.addEventListener 來(lái)監(jiān)聽(tīng) resize 事件。

window.addEventListener('resize', function() {
    console.log('窗口大小發(fā)生變化了！');
    // 在這里根據(jù)窗口大小調(diào)整布局或樣式
    // 例如：調(diào)整某個(gè)元素的寬度為窗口寬度的80%
    document.getElementById('myElement').style.width = window.innerWidth * 0.8 + 'px';
});

實(shí)例3. 監(jiān)聽(tīng)滾動(dòng)事件

當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，你可能想要執(zhí)行一些操作，比如顯示或隱藏導(dǎo)航欄、加載更多內(nèi)容等。這時(shí)，你可以使用 window.addEventListener 來(lái)監(jiān)聽(tīng) scroll 事件。

window.addEventListener('scroll', function() {
    console.log('頁(yè)面正在滾動(dòng)！');
    // 在這里根據(jù)滾動(dòng)位置執(zhí)行操作
    // 例如：當(dāng)滾動(dòng)到一定位置時(shí)顯示“返回頂部”按鈕
    if (window.scrollY > 100) {
        document.getElementById('backToTop').style.display = 'block';
    } else {
        document.getElementById('backToTop').style.display = 'none';
    }
});

實(shí)例4. 監(jiān)聽(tīng)在線/離線狀態(tài)變化

在開(kāi)發(fā)需要處理網(wǎng)絡(luò)狀態(tài)的應(yīng)用時(shí)，你可能想要知道用戶是否在線。這時(shí)，你可以使用 window.addEventListener 來(lái)監(jiān)聽(tīng) online 和 offline 事件。

window.addEventListener('online', function() {
    console.log('用戶已在線！');
    // 在這里執(zhí)行在線時(shí)需要的操作
});
window.addEventListener('offline', function() {
    console.log('用戶已離線！');
    // 在這里執(zhí)行離線時(shí)需要的操作
});

實(shí)例5. 監(jiān)聽(tīng)鍵盤事件

雖然 window.addEventListener 通常用于監(jiān)聽(tīng)與窗口相關(guān)的事件，但你也可以用它來(lái)監(jiān)聽(tīng)鍵盤事件，比如 keydown、keyup 等。不過(guò)，更常見(jiàn)的是將這些事件監(jiān)聽(tīng)器添加到具體的元素上，但出于演示目的，這里還是展示一下如何在 window 上監(jiān)聽(tīng)鍵盤事件。

window.addEventListener('keydown', function(event) {
    console.log('按下了鍵盤上的鍵：', event.key);
    // 在這里根據(jù)按下的鍵執(zhí)行操作
    // 例如：當(dāng)用戶按下Enter鍵時(shí)執(zhí)行某個(gè)操作
    if (event.key === 'Enter') {
        console.log('用戶按下了Enter鍵！');
    }
});

到此這篇關(guān)于js window.addEventListener 是什么？的文章就介紹到這了,更多相關(guān)js window.addEventListener內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論