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

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

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

示例

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

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

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

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

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

注意事項

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

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

實例1. 監(jiān)聽頁面加載完成事件

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

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

實例2. 監(jiān)聽窗口大小變化事件

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

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

實例3. 監(jiān)聽滾動事件

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

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

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

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

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

實例5. 監(jiān)聽鍵盤事件

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

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

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

最新評論