Cannot read property 'addEventListener' of null

今天打開頁面的時候遇到個問題，Cannot read property 'addEventListener' of null

原因：在頁面還沒有加載完成後這段監聽的js代碼已經執行，所以在執行這段代碼的時候監聽的DOM節點還沒有加載創建，所以根本就找不到監聽的元素。所以返回null。

解決方法：

1.等待頁面完全加載完了再加載這段Js即可；

2.在原生js中的解決方法：

     1.將腳本放在頁面的底部。
     2.在加載事件中調用附加代碼。
     3.使用jQuery庫，它是DOM就緒事件。
什麼是jQuery ready事件？
JavaScript提供了在頁面呈現時執行代碼的加載事件，但是直到所有資源（如圖像）都被完全收到爲止，纔會觸發該事件。 在大多數情況下，只要DOM層次結構完全構建，腳本就可以運行。 傳遞給.ready（）的處理程序保證在DOM準備好後執行，所以這通常是附加所有其他事件處理程序的最佳位置...

下面還有網上的一個解決方法，上邊的方法不好用的話，可以試下下面這個方法

JS部分：

html部分：

把js部分的代碼加在瞭如下代碼框內。

拓展資料：

js，JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。

在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。

因爲Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名爲JavaScript。但實際上它的語法風格與Self及Scheme較爲接近。