我印象中是網頁的元素以JS產生 才有需要這樣包起來
我的網頁dom全都是用html產生的
為什麼直接寫 沒有作用 一定要等待網頁載入？？？
說明:
我練習商品網頁
裡面有很多加入購物車的按鈕
我想要把他們加上addEventListener追蹤有沒有被點擊
然而這一條程式碼
一定要我放在 window.addEventListener('load',() => {裡面才有作用
所以我想知道這個時機是什麼？
已邀請的邦友 {{ invite_list.length }}/5
典型的初學著問題。
省先要先看你的JS程式碼寫在哪裏。
要先知道一件事，其HTML碼在瀏覽器下，也是一行一行讀下來的。
所以如果你的HTML如下
(以下為簡單示意)
<html>
js程式碼控制ID=A元件
......
<div id="a"></div>
</html>
當到該JS時。其實其下的A元件並還未生成。
所以這段JS依然會先運行，只是無元件可處理。導修會發生該JS無作用的情況
但當如下的寫法
<html>
window.addEventListener('load',() => ..... 控制A元件
<div id="a"></div>
</html>
其內的程式碼。會等到讀完網頁後，再會開始運行。
因為已經載入全部的網頁完成。所以自然就可以操控元件
如依以上的原則來看。那是否可以寫成如下的方式??
<html>
......
<div id="a"></div>
.....
js程式碼控制ID=A元件
</html>
答案是可以的。因為當讀取到該JS程式碼式。其實A元件已生成了。自然就可以控制了。
以上解答不知有沒有辦法讓你了解。
iThome鐵人賽
看影片追技術