? ? 在javascript和JQuery之中，都有事件的處理方式，在我們編寫程序?qū)崿F(xiàn)某些功能的時候，我們會發(fā)現(xiàn)使用原生的DOM事件與JQuery中封裝的事件都能實現(xiàn)同樣的效果，那么也許我們會認為他們之間的區(qū)別不是很大，甚至說基本沒有區(qū)別。這種觀點是錯誤的，其實在事件函數(shù)的底層設(shè)計時，他們賦予元素的事件屬性是通過不同的事件綁定機制來實現(xiàn)的。

? ? 我們先從表面理解：我們都知道，JQuery是javascript的一個函數(shù)庫，他是基于javascript原生設(shè)計的。就是說JQuery中的事件，都是通過javascript來編寫的。這是其中的一點；還有最重要的一點就是他們綁定事件的方式不一樣，javascript和JQuery中則采用事件機制不同。這是他們之間主要的不同點，接下來我們細細講講。

( ?一 ?) javascript 事件

?一 .DOM事件及其傳輸機制

? ?首先我們要了解的事件的一些知識了，事件的組成，事件有3部分構(gòu)成的，分別是事件源，事件，和事件處理。事件源和事件是最簡本的要求，可也沒有處理程序。

? ? ? 1.事件源：

? ? ? ? 簡單的說，就是被綁定事件的元素，

? ? ? 2.事件

? ? ? ?在Javascript中event對象中有很多的事件，例如onload，onclick，onmouse等，但是我們知道javascript中有內(nèi)置的事件和Dom中event的事件，他們中有很多的相同事件，但是DOM對象event對象中相比較多出的很多的鍵盤/鼠標事件，和一些關(guān)于IE的私有事件（僅僅IE能使用）。

? ? ?3.事件處理

? ? ? 當事件被觸發(fā)時，所要執(zhí)行的javascript的代碼段，去完成某項功能。可以不添處理程序。

? ?（———）“事件冒泡”?

? ? 在學習c語言時都知道冒泡排序，“事件冒泡”和它是完全不同的，所謂的事件冒泡就是說，當我們觸發(fā)事件時，事件會一級級的向它的祖先元素傳遞，一直到最高級，它的傳遞順序?qū)τ诓煌瑸g覽器，也有所不同;

? ? 對于IE：觸發(fā)事件元素——祖先元素——body—— HTML——document；

? ? 高級瀏覽器：觸發(fā)事件元素——祖先元素——body——document——window；

? ?也就是說事件一開始先從根節(jié)點流向目標事件（稱為事件捕獲），然后在目標事件上被觸發(fā)（目標階段），之后再回到文檔根節(jié)點(事件冒泡)。事件冒泡是很有用的，他能將我們從事件的監(jiān)聽中釋放出來，同時我們也可以監(jiān)聽目標事件的祖先元素。又是因為事件冒泡的特點，這樣就會造成我們的各個模塊之間會相互的影響，所以必須要消除他的影響。

? ?（-----）事件捕獲階段

? ? ? ?與事件冒泡不同，事件捕獲是事件的第一個階段，事件從文檔根節(jié)點出發(fā)，隨著DOM樹向事件目標流去，經(jīng)過DOM的各個節(jié)點，一直流到事件目標位置，事件捕獲的主要作用就是建立一個路徑，在冒泡階段，事件會沿著這條路徑回到跟節(jié)點。

? ? ? （----）目標階段

? ? ? ? ?當事件到達目標節(jié)點時，事件就進入的目標階段。事件在目標節(jié)點上被觸發(fā)，然后向上傳播，直到回到文檔根節(jié)點。

? ? ? ? ??

? ? ?清除事件影響，可以通過event對象下的event.stopPropagation（）函數(shù)來清除，對于IE，使用event.cancelBubble=true;來清除影響。

? ?我們在編寫時采用這種兼容寫法：

if (event&&event.stopPropagation){event.stopPropagation(); }else {event.cancleBubble=true;}

? ?在說一種清除事件冒泡的辦法：preventDefault();這個函數(shù)也是event對象的辦法，他和stopPropagation()有一些區(qū)別的；

? ? ? ?preventDefult(),他僅僅阻止事件的處理程序不在執(zhí)行，卻不能阻止冒泡機制，

? ? ? ?stopPropagation（），他能阻止冒泡機制，同事不影響事件的處理程序。? ? ??

? ? 二.事件阻止

? ? ? 上面說了對事件的阻止最常見的兩種辦法，1.preventDefault();2.stopPropagation();我們來細細說說他們的差別

? ? ? ? 1、preventDefault()

? ? ? ? ? ??preventDefault()函數(shù)是用來阻止瀏覽器的默認行為，那么什么是瀏覽器默認行為呢？舉個例子，我們一超鏈接link的<a>標簽為例，當我們點擊<a>標簽時，就觸發(fā)了瀏覽器默認click事件，通過冒泡機制，一直傳遞到document，然后由瀏覽器解析href內(nèi)容，并在導航欄中打開地址。

? ? ? ?通過preventDefault()函數(shù)，我們可以阻止很多瀏覽器的默認行為，比如敲擊空格鍵的時頁面滾動。

? ? ? ?2.stopPropagation()

? ? ? ? ?調(diào)用event.stopPropagation()只會阻止傳播鏈中后續(xù)的回調(diào)函數(shù)被觸發(fā)（阻止了冒泡階段）。它不會阻止事件處理函數(shù)的行為。

? ? ?三. 自定義事件

? ? ? ? ?瀏覽器并不是能唯一觸發(fā)dom事件的載體，我們可以創(chuàng)建自定義的事件并把它們分派給你文檔中的任意節(jié)點。這些自定義的事件和通常的DOM事件有相同的行為。這也就是我們最最常用的綁定事件的方法，比如：li.onclick,div.onmouseover,都是一些常見的自定義事件。

? ? ?四.代理事件

? ? ? ?代理事件監(jiān)聽可以讓你使用一個事件監(jiān)聽器去監(jiān)聽大量的DOM節(jié)點的事件，在這種情況下，它是一種更加方便并且高性能的事件監(jiān)聽方法。舉例來說，如果有一個列表<ul>包含了100個子元素<li>，它們都需要對click事件做出相似的響應，那么我們可能需要查詢這100個子元素，并分別為他們添加上事件監(jiān)聽器。這樣的話，我們就會產(chǎn)生100個獨立的事件監(jiān)聽器。如果有一個新的元素被添加進去，我們也需要為它添加同樣的監(jiān)聽器。這種方式不但代價比較大，維護起來也比較麻煩。

代理事件監(jiān)聽可以讓我們更簡單的處理這種情況。我們不去監(jiān)聽所有的子元素的click事件，相反，我們監(jiān)聽他們的父元素<ul>。當一個<li>元素被點擊的時候，這個事件會向上冒泡至<ul>，觸發(fā)回調(diào)函數(shù)。我們可以通過檢查事件的event.target屬性來判斷具體是哪一個<li>被點擊了。

? ? 五 事件監(jiān)聽和移除監(jiān)聽機制

? ? ? ?（—）：事件監(jiān)聽

? ? ? ? ? ?在過去，瀏覽器的事件監(jiān)聽機制是不盡相同的，但是隨著瀏覽器的逐漸的標準化，事件監(jiān)聽機制也相對統(tǒng)一了，但是要是你要監(jiān)聽IE瀏覽器的話，最好使用一些前端的框架，如jQuery,因為這些前端的框架封裝了很好的兼容問題。

? ? ? ? ? ?事件的監(jiān)聽函數(shù):element.addEventListener(<event-name>, <callback>, <use-capture>);

? ? ? ? ? ? ?參數(shù)：<event-name> 是我們要監(jiān)聽的事件，他可以是任何Dom的標準事件（click，mousedown，）；

? ? ? ? ? ? ?參數(shù)：<callback> 是一個回調(diào)函數(shù)，當事件被觸發(fā)的時候，相應的事件對象和數(shù)據(jù)，會作為一個參數(shù)傳遞給這個函數(shù)。

? ? ? ? ? ? ?參數(shù)：<event-capture> 這個參數(shù)返回布爾值，它用來觀測回調(diào)函數(shù)是否在”事件捕獲階段“被觸發(fā)，

? ? ? ? ?（二）：移除事件監(jiān)聽

? ? ? ? ? ? ? ? ? ? ?我們使用?element.removeEventListener()方法來移除事件監(jiān)聽;

? ? ? ? ? ? ? ? ? ? ?element.removeEventListener(<event-name>, <callback>, <use-capture>);

? ? ? ? ? ? 但是removeElementListener有一點需要注意的是：你必須要有這個被綁定的回調(diào)函數(shù)的引用。簡單地調(diào)用

? ? ? element.removeEventListener('click');是不能達到想要的效果的。也就是說，在移除事件監(jiān)聽時，必須要有回調(diào)函數(shù)的調(diào)用，也就是說匿名函數(shù)不能作為回調(diào)函數(shù)來使用的。

? ?最后我們來說一下DOM事件從被觸發(fā)到事假結(jié)束的全部過程：? ?

對與自定義的事件: 一旦事件被觸發(fā)，通過事件監(jiān)聽機制，瀏覽器開始“事件捕獲”階段，到達“目標階段“ ,然后執(zhí)行相應函數(shù)處理，在通過”冒泡機制“將事件傳遞給根目錄。

? ?而瀏覽器的默認行為的執(zhí)行過程與上面的差不多，只不過它是由瀏覽的默認綁定的函數(shù)處理方式來執(zhí)行的，不會受你的控制。

? ?（ ? 二 ?）JQuery 事件

? ? ? ? ? ?其實相對于DOM的事件的綁定系統(tǒng)和原理，JQuery的事件機制是非常的簡單的。因為jQuery 是對一些js代碼的封裝，他在封裝的過程中為我們解決了很多的問題，比如最棘手的兼容問題，所以直接使用jQuery框架是非常方便的。

? ? ? ? ? JQuery的事件綁定有兩種方式：1.綁定事件，2：觸發(fā)事件；

? ? ? ? ? ? 1.綁定事件

? ? ? ? ? ? ? 在jQuery中，他為我們提供了許多諸如click(),形式的API，這種事件就是所謂的綁定事件，這種事件的綁定方式很是僵硬，不靈活。

? ? ? ? ? ? 所以為了實現(xiàn)綁定多個事件，JQuery又提供了on（）這種綁定事件的方式，它允許我們同時給對象綁定一個或多個事件。還有一個API，bind（）

?它也可以綁定一個或多個事件，但是bind（）和on（）的不同之處就在與；on（）只對匹配對象綁定事件，而bind（）是對所有的匹配元素綁定事件，所以推薦使用on（）的方式；

? ? ? ? ? ? 2.觸發(fā)事件

? ? ? ? ? ? ?trigger() 在每個匹配元素上觸發(fā)某類事件，同時這個函數(shù)也會導致瀏覽器同名的默認行為的執(zhí)行，所以在使用時為了不影響其他部分，我們需要返回值為false。這種事件是間接的綁定事件，也就是說，在沒有觸發(fā)之前，并沒有事件綁定的。

? ? ? ? ? ? ?triggerHandler() 具有trigger()的功能，但是他不會觸發(fā)瀏覽器的默認行為；

? ? ? ? ? ? 補充：事件代理

? ? ? ? ? ? ? jQuery 提供的api ?delegates()函數(shù)是用來做事件代理。給指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。

? ? ? ? ? ?jQuery事件解綁?

? ? ? ? ? ? off():用來解除on（）方式綁定的事件;

? ? ? ? ? ? unbind():用來解除bind()方式綁定的事件;

? ? ? ? ? ?undelegates():用來解除以delegates()方式事件委派任務(wù)。

? ? ? ? 總的來說我對事件的理解也就這么多了，當中可能會出現(xiàn)一些表述不清的情況，做好的做發(fā)就是你可以通過寫代碼來驗證這些知識點的，畢竟”實踐是檢驗真理“的唯一標準嘛，希望對你 對事件的學習有所幫助吧！！寫了兩天，也看了很多資料，但是難免出錯，歡迎您的斧正。。共同學習。

?

?

? ??

轉(zhuǎn)載于:https://www.cnblogs.com/zhangyang0619/p/5848132.html

總結(jié)

以上是生活随笔為你收集整理的DOM事件与jQuery事件的是非纠葛的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。