JavaScript Event 的誤區

緣起:

    昨天在弄專案的程式時碰到一個雷，會發生這件事是因為我對 JavaScript 的 event 傳遞不是很清楚 + 我對 HTML DOM 物件 z-index 的順位有認知錯誤，所以想寫個文章記錄一下自己犯的蠢。

範例:

    有用到 Vue，JQuery 是後面看某些參數時會用到的，這兩個都跟 html 檔放在同個資料夾下，那個 html 的內容很簡單。

    li 用 v-on:click 綁定點擊事件，點擊後顯示那個被點擊的物件，可以傳 $event 參數進去。

    然後用開發工具看一下 li 跟 a 元素

這是 a tag

這是 li tag

    第一個誤解就是，我以為 a 是被 li 包著，所以 li 會是在 a 上方，我應該怎麼點都會先點到 li (奇怪的想法，那 <a> 怎麼還能被點到呢 ?)。第二個誤解是，我以為事件是跟 li 綁定的，所以不干 a 的事，但實際操作時點到 a ，它會有反應。

    這真的讓我有點難以理解，給我的感覺就像，有人跟我爸約好某天要去喝酒，但這個約定對我這個兒子也有效果。

z-index:

    第一個問題是跟 z-index 有關，沒指定時它是 auto 的，看了這篇文章後我才理解，原來包在越裡面的元素，它在顯示時就會被放在越上層。自己想一想後，也覺得合理，不知為啥那時會有相反的思維。

Event:

    第二個問題好像跟 Javascript 事件的傳遞有關，已經有別人寫好的文章，到時有空會嘗試看看，就不寫自己的教學了，畢竟有現成的，而且感覺自己也寫不好就是。

    我現在大概知道為什麼了，我點擊連結時會產生一個 event，它的 target 會是 a，事件在 bubbling phase 時傳到 li 那邊被補捉，所以才產生我看到的結果。