jQuery事件是DOM事件的封裝，同時支持自定義的擴展。在程序設計中，事件和代理有著相似的作用： 它們提供了一種機制，使得行為的實現方式和調用時機可以分離。

不談jQuery，DOM本身就提供了一系列的javascript事件，例如click，keyup，submit。 未實現相關業務邏輯，通常會為這些事件定義一系列的處理函數，處理函數定義了業務的實現方式，而瀏覽器知道這些業務的調用時機。 Javascript事件就是這樣一種機制，使得行為的實現方式和調用時機可以動態地綁定。

jQuery事件是通過封裝javascript事件來實現的，例如.keyup()便是onkeyup的封裝：

.keyup()： Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

除了封裝大多數的javascript事件，jQuery提供了統一的事件綁定和觸發機制：

• 綁定事件：bind、on、live、delegate、keyup(<function>)；
• 觸發事件：trigger('keyup')、keyup()；
• 解綁事件：unbind、off、die、undelegate。

事件綁定：bind

使用javascript綁定一個事件很簡單，只需要在HTML中設置onxxx屬性， 并且在javascript中定義相關的處理函數便可以完成。

<div onclick="func()"></div> <script> function func(){ console.log('clicked!'); } </script>

上述是基本的javascript事件處理方式，而jQuery提供了更加方便的方式：.bind()函數。

.bind()：Attach a handler to an event for the elements.

<div id='foo'></div> <script> $('#foo').click(function(){ console.log('clicked!'); }); </script>

.click(<function>)等效于.bind('click', <function>)。另外還可以通過unbind來解綁事件：

$('#foo').unbind('click');

如果unbind參數為空，則解綁匹配元素的所有事件處理函數。 在我的理解中，我們還是不要off，unbind，die吧。即使不談效率，它們也使得軟件更難理解了。 如果你感覺有需要，下面的.on()應該會滿足你~

.bind將會給所有匹配的元素都綁定一次事件，當元素很多時性能會變差。 而且后來動態新增的元素不會被綁定。

事件冒泡與默認行為

在DOM中默認情況下，事件是會冒泡的，即同樣的事件會沿著DOM樹逐級觸發。 有時這是我們不希望的行為，可以在事件處理函數中阻止它。

// 事件處理函數的第一個參數是一個事件對象 $('#foo').click(function(event){ event.stopPropagation(); // do sth. });

瀏覽器對用戶事件的默認行為是另一個需要考慮的事情，尤其是<a>標簽的click事件。 當用戶點擊<a>標簽時，首先調用所有的事件處理函數，然后執行默認行為：頁面跳轉或者定位。 同樣地，我們可以阻止它：

$('a').click(function(event){ event.preventDefault(); // do sth. });

在實踐中，我們常常讓事件處理函數return false來阻止冒泡和默認行為， 可以認為return false做了三件事情：

stopPropagation()；

preventDefault()；

立即結束當前函數并返回。

$('a').click(function(event){ // do sth. return false; });

自定義事件

jQuery事件是基于DOM事件的，但jQuery提供了更加普遍的事件機制。 這使得我們可以方便地自定義事件，只需要給一個尚不存在的事件名即可：

<div id='foo'></div> <script> $('#foo').bind('fucked', function(){ console.log("I'm fucked."); }); $('#foo').trigger('fucked'); </script>

這里定義了一個叫fucked的事件并綁定了處理函數，然后使用trigger來觸發該事件。 在真實的場景中，通常用其他的事件來觸發自定義事件：

var he = 'man'; $('#foo').click(function(){ if(he === 'man') $(this).trigger('fucked'); });

Delegate

.delegate是另一種綁定事件的方式。它將事件處理函數綁定在指定的根元素上， 由于事件會冒泡，它用來處理指定的子元素上的事件。

.delegate()：Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

<div id="root"><a>Alice</a> <a>Bob</a> </div> <script> $('#root').delegate('a', 'click', function(){ console.log('clicked'); }); </script>

它的使用方式比bind稍顯復雜，但它的功能非常強大：

自動綁定動態添加的元素。因為事件處理函數綁定在#root上，新加的子元素事件也會冒泡到#root。

性能好于.bind()。只綁定一個事件處理函數，綁定速度相當快。

如果你在使用AngularJS等動態操作DOM的工具，那么.delegate()將會非常實用，它能對新增的DOM元素自動綁定。

On

事實上，.on()才是jQuery事件的提供者。其他的事件綁定方法都是通過.on()來實現的，請看jQuery1.8.2的源碼：

bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, unbind: function( types, fn ) { return this.off( types, null, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, die: function( types, fn ) { jQuery( this.context ).off( types, this.selector || "**", fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); },

既然.on是最通用的jQuery事件機制，那么上述的所有例子都可以用.on()來實現：

// bind $( "#foo" ).bind( "click", function( e ) {} ); $( "#foo" ).on( "click", function( e ) {} ); // delegate $( "#root" ).delegate( "a", "click", function( e ) {} ); $( "#root" ).on( "click", "a", function( e ) {} );

我們看到上面還有一個.live()方法，它與delegate是類似的， 不過它強制指定了root是document（即this.context），因而性能略差。 自jQuery1.7起已經不推薦使用了。參見： https://api.jquery.com/category/deprecated/deprecated-1.7/

轉載于:https://www.cnblogs.com/PerfectBeauty/p/7866109.html

總結

以上是生活随笔為你收集整理的什么是 jQuery 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。