DOM事件与jQuery事件的是非纠葛
? ? 在javascript和JQuery之中，都有事件的處理方式，在我們編寫程序實現某些功能的時候，我們會發現使用原生的DOM事件與JQuery中封裝的事件都能實現同樣的效果，那么也許我們會認為他們之間的區別不是很大，甚至說基本沒有區別。這種觀點是錯誤的，其實在事件函數的底層設計時，他們賦予元素的事件屬性是通過不同的事件綁定機制來實現的。
? ? 我們先從表面理解：我們都知道，JQuery是javascript的一個函數庫，他是基于javascript原生設計的。就是說JQuery中的事件，都是通過javascript來編寫的。這是其中的一點；還有最重要的一點就是他們綁定事件的方式不一樣，javascript和JQuery中則采用事件機制不同。這是他們之間主要的不同點，接下來我們細細講講。
( ?一 ?) javascript 事件
?一 .DOM事件及其傳輸機制
? ?首先我們要了解的事件的一些知識了，事件的組成，事件有3部分構成的，分別是事件源，事件，和事件處理。事件源和事件是最簡本的要求，可也沒有處理程序。
? ? ? 1.事件源：
? ? ? ? 簡單的說，就是被綁定事件的元素，
? ? ? 2.事件
? ? ? ?在Javascript中event對象中有很多的事件，例如onload，onclick，onmouse等，但是我們知道javascript中有內置的事件和Dom中event的事件，他們中有很多的相同事件，但是DOM對象event對象中相比較多出的很多的鍵盤/鼠標事件，和一些關于IE的私有事件（僅僅IE能使用）。
? ? ?3.事件處理
? ? ? 當事件被觸發時，所要執行的javascript的代碼段，去完成某項功能。可以不添處理程序。
? ?（———）“事件冒泡”?
? ? 在學習c語言時都知道冒泡排序，“事件冒泡”和它是完全不同的，所謂的事件冒泡就是說，當我們觸發事件時，事件會一級級的向它的祖先元素傳遞，一直到最高級，它的傳遞順序對于不同瀏覽器，也有所不同;
? ? 對于IE：觸發事件元素——祖先元素——body—— HTML——document；
? ? 高級瀏覽器：觸發事件元素——祖先元素——body——document——window；
? ?也就是說事件一開始先從根節點流向目標事件（稱為事件捕獲），然后在目標事件上被觸發（目標階段），之后再回到文檔根節點(事件冒泡)。事件冒泡是很有用的，他能將我們從事件的監聽中釋放出來，同時我們也可以監聽目標事件的祖先元素。又是因為事件冒泡的特點，這樣就會造成我們的各個模塊之間會相互的影響，所以必須要消除他的影響。
? ?（-----）事件捕獲階段
? ? ? ?與事件冒泡不同，事件捕獲是事件的第一個階段，事件從文檔根節點出發，隨著DOM樹向事件目標流去，經過DOM的各個節點，一直流到事件目標位置，事件捕獲的主要作用就是建立一個路徑，在冒泡階段，事件會沿著這條路徑回到跟節點。
? ? ? （----）目標階段
? ? ? ? ?當事件到達目標節點時，事件就進入的目標階段。事件在目標節點上被觸發，然后向上傳播，直到回到文檔根節點。
? ? ? ? ??
? ? ?清除事件影響，可以通過event對象下的event.stopPropagation（）函數來清除，對于IE，使用event.cancelBubble=true;來清除影響。
? ?我們在編寫時采用這種兼容寫法：
if (event&&event.stopPropagation){event.stopPropagation(); }else {event.cancleBubble=true;}? ?在說一種清除事件冒泡的辦法：preventDefault();這個函數也是event對象的辦法，他和stopPropagation()有一些區別的；
? ? ? ?preventDefult(),他僅僅阻止事件的處理程序不在執行，卻不能阻止冒泡機制，
? ? ? ?stopPropagation（），他能阻止冒泡機制，同事不影響事件的處理程序。? ? ??
? ? 二.事件阻止
? ? ? 上面說了對事件的阻止最常見的兩種辦法，1.preventDefault();2.stopPropagation();我們來細細說說他們的差別
? ? ? ? 1、preventDefault()
? ? ? ? ? ??preventDefault()函數是用來阻止瀏覽器的默認行為，那么什么是瀏覽器默認行為呢？舉個例子，我們一超鏈接link的<a>標簽為例，當我們點擊<a>標簽時，就觸發了瀏覽器默認click事件，通過冒泡機制，一直傳遞到document，然后由瀏覽器解析href內容，并在導航欄中打開地址。
? ? ? ?通過preventDefault()函數，我們可以阻止很多瀏覽器的默認行為，比如敲擊空格鍵的時頁面滾動。
? ? ? ?2.stopPropagation()
? ? ? ? ?調用event.stopPropagation()只會阻止傳播鏈中后續的回調函數被觸發（阻止了冒泡階段）。它不會阻止事件處理函數的行為。
? ? ?三. 自定義事件
? ? ? ? ?瀏覽器并不是能唯一觸發dom事件的載體，我們可以創建自定義的事件并把它們分派給你文檔中的任意節點。這些自定義的事件和通常的DOM事件有相同的行為。這也就是我們最最常用的綁定事件的方法，比如：li.onclick,div.onmouseover,都是一些常見的自定義事件。
? ? ?四.代理事件
? ? ? ?代理事件監聽可以讓你使用一個事件監聽器去監聽大量的DOM節點的事件，在這種情況下，它是一種更加方便并且高性能的事件監聽方法。舉例來說，如果有一個列表<ul>包含了100個子元素<li>，它們都需要對click事件做出相似的響應，那么我們可能需要查詢這100個子元素，并分別為他們添加上事件監聽器。這樣的話，我們就會產生100個獨立的事件監聽器。如果有一個新的元素被添加進去，我們也需要為它添加同樣的監聽器。這種方式不但代價比較大，維護起來也比較麻煩。
代理事件監聽可以讓我們更簡單的處理這種情況。我們不去監聽所有的子元素的click事件，相反，我們監聽他們的父元素<ul>。當一個<li>元素被點擊的時候，這個事件會向上冒泡至<ul>，觸發回調函數。我們可以通過檢查事件的event.target屬性來判斷具體是哪一個<li>被點擊了。
? ? 五 事件監聽和移除監聽機制
? ? ? ?（—）：事件監聽
? ? ? ? ? ?在過去，瀏覽器的事件監聽機制是不盡相同的，但是隨著瀏覽器的逐漸的標準化，事件監聽機制也相對統一了，但是要是你要監聽IE瀏覽器的話，最好使用一些前端的框架，如jQuery,因為這些前端的框架封裝了很好的兼容問題。
? ? ? ? ? ?事件的監聽函數:element.addEventListener(<event-name>, <callback>, <use-capture>);
? ? ? ? ? ? ?參數：<event-name> 是我們要監聽的事件，他可以是任何Dom的標準事件（click，mousedown，）；
? ? ? ? ? ? ?參數：<callback> 是一個回調函數，當事件被觸發的時候，相應的事件對象和數據，會作為一個參數傳遞給這個函數。
? ? ? ? ? ? ?參數：<event-capture> 這個參數返回布爾值，它用來觀測回調函數是否在”事件捕獲階段“被觸發，
? ? ? ? ?（二）：移除事件監聽
? ? ? ? ? ? ? ? ? ? ?我們使用?element.removeEventListener()方法來移除事件監聽;
? ? ? ? ? ? ? ? ? ? ?element.removeEventListener(<event-name>, <callback>, <use-capture>);
? ? ? ? ? ? 但是removeElementListener有一點需要注意的是：你必須要有這個被綁定的回調函數的引用。簡單地調用
? ? ? element.removeEventListener('click');是不能達到想要的效果的。也就是說，在移除事件監聽時，必須要有回調函數的調用，也就是說匿名函數不能作為回調函數來使用的。
? ?最后我們來說一下DOM事件從被觸發到事假結束的全部過程：? ?
對與自定義的事件: 一旦事件被觸發，通過事件監聽機制，瀏覽器開始“事件捕獲”階段，到達“目標階段“ ,然后執行相應函數處理，在通過”冒泡機制“將事件傳遞給根目錄。
? ?而瀏覽器的默認行為的執行過程與上面的差不多，只不過它是由瀏覽的默認綁定的函數處理方式來執行的，不會受你的控制。
? ?（ ? 二 ?）JQuery 事件
? ? ? ? ? ?其實相對于DOM的事件的綁定系統和原理，JQuery的事件機制是非常的簡單的。因為jQuery 是對一些js代碼的封裝，他在封裝的過程中為我們解決了很多的問題，比如最棘手的兼容問題，所以直接使用jQuery框架是非常方便的。
? ? ? ? ? JQuery的事件綁定有兩種方式：1.綁定事件，2：觸發事件；
? ? ? ? ? ? 1.綁定事件
? ? ? ? ? ? ? 在jQuery中，他為我們提供了許多諸如click(),形式的API，這種事件就是所謂的綁定事件，這種事件的綁定方式很是僵硬，不靈活。
? ? ? ? ? ? 所以為了實現綁定多個事件，JQuery又提供了on（）這種綁定事件的方式，它允許我們同時給對象綁定一個或多個事件。還有一個API，bind（）
?它也可以綁定一個或多個事件，但是bind（）和on（）的不同之處就在與；on（）只對匹配對象綁定事件，而bind（）是對所有的匹配元素綁定事件，所以推薦使用on（）的方式；
? ? ? ? ? ? 2.觸發事件
? ? ? ? ? ? ?trigger() 在每個匹配元素上觸發某類事件，同時這個函數也會導致瀏覽器同名的默認行為的執行，所以在使用時為了不影響其他部分，我們需要返回值為false。這種事件是間接的綁定事件，也就是說，在沒有觸發之前，并沒有事件綁定的。
? ? ? ? ? ? ?triggerHandler() 具有trigger()的功能，但是他不會觸發瀏覽器的默認行為；
? ? ? ? ? ? 補充：事件代理
? ? ? ? ? ? ? jQuery 提供的api ?delegates()函數是用來做事件代理。給指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
? ? ? ? ? ?jQuery事件解綁?
? ? ? ? ? ? off():用來解除on（）方式綁定的事件;
? ? ? ? ? ? unbind():用來解除bind()方式綁定的事件;
? ? ? ? ? ?undelegates():用來解除以delegates()方式事件委派任務。
? ? ? ? 總的來說我對事件的理解也就這么多了，當中可能會出現一些表述不清的情況，做好的做發就是你可以通過寫代碼來驗證這些知識點的，畢竟”實踐是檢驗真理“的唯一標準嘛，希望對你 對事件的學習有所幫助吧！！寫了兩天，也看了很多資料，但是難免出錯，歡迎您的斧正。。共同學習。
?
?
? ??
轉載于:https://www.cnblogs.com/zhangyang0619/p/5848132.html
總結
以上是生活随笔為你收集整理的DOM事件与jQuery事件的是非纠葛的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： appium()-The event f
- 下一篇： c语言基础回顾 —— 其他知识点