替代役162梯新訓心得

眨眼間，從入伍到新訓結束已經過了快三週，在此紀錄新訓的心得。

https://github.com/sj82516/Blog/blob/master/Others/SMSlife162.md

Javascript & JQuery 的事件觸發流程

以前用JQuery很習慣把HTML elements 綁定事件，但之前在看一些JS面試考題才赫然發現自己完全不了解JS與DOM之間溝通的方式，尤其是最基本的事件觸發流程!!

當我們希望一個HTML element聆聽動作去觸發一個function時，當頁面有動作觸發後，總共會有三個狀態
1.Capture：JS會從HTML的根目錄 document 一路往下爬->HTML -> Body -> div......，一路到目標element
2.Target：抵達目標element
3.Bubble：一路又回去HTML根目錄 ...->div->Body->HTML...
一般綁定觸發是在Bubble狀態時觸發，詳見請看此連結

在實作方面，JQuery的on function 只有Bubble up 觸發時機，要在Capture階段觸發可以改用原生JS的attachEvent，綁定事件的方式可以參考此連結

最後附錄是我自己在Jsbin寫的範例，這種東西還是自己寫一次最實在。