jQuery事件-委託機制、事件物件
阿新 • • 發佈：2019-02-19
委託機制
事件物件
- 語法：.on( events ,[ selector ] ,[ data ], handler(eventObject) )
- 原理：如果提供了第二引數，那麼事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件回撥函式，否則，如果遇不到選擇器匹配的元素，將不會觸發事件回撥函式
- 有選擇器引數，回撥函式中的this指向選擇器選定的物件，而不是on前面的物件
- 原理：是用來記錄一些事件發生時的相關資訊的物件。事件物件只有事件發生時才會產生，並且只能是事件處理函式內部訪問，在所有事件處理函式執行結束後，事件物件就被銷燬。
-
ul有多個子元素li，如果我要響應每一個li的事件，那麼常規的方法就是需要給所有的li都單獨繫結一個事件監聽，這樣寫法很符合邏輯，但是同時有顯得繁瑣。因為li都有一個共同的父元素，而且所有的事件都是一致的，這裡我們可以採用要一個技巧來處理，也是常說的"事件委託"
-
jQuery事件物件的屬性：
- event.target：代表當前觸發事件的元素，可以通過當前元素物件的一系列屬性來判斷是不是我們想要的元素。event.target 和 this 通常用來確定事件是不是由於冒泡而觸發的。結合上面的例子，event.target 是 li，this 是 ul
- event.type：獲取事件的型別，結合上面的例子，得出 click
- event.pageX 和 event.pageY：獲取滑鼠當前相對於頁面的座標，以頁面為參考點,不隨滑動條移動而變化
- event.currentTarget : 在事件冒泡過程中的當前DOM元素，等同於this
-
event.which：獲取按下的鍵盤按鍵Unicode值，event.which 將 event.keyCode 和 event.charCode 標準化了。
-
jQuery事件物件的方法：
- event.preventDefault() 方法：阻止預設行為。這個用的特別多，在執行這個方法後，如果點選一個連結（a標籤），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件物件上)被呼叫過了
- event.stopPropagation() 方法：阻止事件冒泡。為防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函式