站長資訊網(wǎng)在之前的文章《18個你需要知道的JavaScript優(yōu)化技巧》中，我們介紹了JavaScript中的一些小技巧，本篇文章我們一起來看一下怎樣對jquery事件進(jìn)行綁定和解綁的相關(guān)知識，希望對大家有幫助。
jQuery事件綁定和解綁
1.1. jQuery 事件注冊
jQuery 為我們提供了方便的事件注冊機(jī)制，是開發(fā)人員抑郁操作優(yōu)缺點(diǎn)如下：
優(yōu)點(diǎn): 操作簡單，且不用擔(dān)心事件覆蓋等問題。
缺點(diǎn): 普通的事件注冊不能做事件委托，且無法實現(xiàn)事件解綁，需要借助其他方法。
語法
演示代碼
<body> <div></div> <script> $(function() { // 1. 單個事件注冊 $("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body>
1.2. jQuery 事件處理
因為普通注冊事件方法的不足，jQuery又開發(fā)了多個處理方法，重點(diǎn)講解如下：
-
on(): 用于事件綁定，目前最好用的事件綁定方法
-
off(): 事件解綁
-
trigger() / triggerHandler(): 事件觸發(fā)
1.2.1 事件處理 on() 綁定事件
因為普通注冊事件方法的不足，jQuery又創(chuàng)建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
語法
演示代碼
<body> <div></div> <ul> <li>我們都是好孩子</li> <li>我們都是好孩子</li> <li>我們都是好孩子</li> </ul> <ol></ol> <script> $(function() { // (1) on可以綁定1個或者多個事件處理程序 // $("div").on({ // mouseenter: function() { // $(this).css("background", "skyblue"); // }, // click: function() { // $(this).css("background", "purple"); // } // }); $("div").on("mouseenter mouseleave", function() { $(this).toggleClass("current"); }); // (2) on可以實現(xiàn)事件委托（委派） // click 是綁定在ul 身上的，但是 觸發(fā)的對象是 ul 里面的小li // $("ul li").click(); $("ul").on("click", "li", function() { alert(11); }); // (3) on可以給未來動態(tài)創(chuàng)建的元素綁定事件 $("ol").on("click", "li", function() { alert(11); }) var li = $("<li>我是后來創(chuàng)建的</li>"); $("ol").append(li); }) </script> </body>
1.2.3. 事件處理 off() 解綁事件
當(dāng)某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。jQuery 為我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發(fā)一次的事件綁定方法 one()，在這里我們重點(diǎn)講解一下 off() ;
語法
演示代碼
<body> <div></div> <ul> <li>我們都是好孩子</li> <li>我們都是好孩子</li> <li>我們都是好孩子</li> </ul> <p>我是一個P標(biāo)簽</p> <script> $(function() { // 事件綁定 $("div").on({ click: function() { console.log("我點(diǎn)擊了"); }, mouseover: function() { console.log('我鼠標(biāo)經(jīng)過了'); } }); $("ul").on("click", "li", function() { alert(11); }); // 1. 事件解綁 off // $("div").off(); // 這個是解除了div身上的所有事件 $("div").off("click"); // 這個是解除了div身上的點(diǎn)擊事件 $("ul").off("click", "li"); // 2. one() 但是它只能觸發(fā)事件一次 $("p").one("click", function() { alert(11); }) }) </script> </body>
1.2.4. 事件處理 trigger() 自動觸發(fā)事件
有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發(fā), 比如輪播圖自動播放功能跟點(diǎn)擊右側(cè)按鈕一致?？梢岳枚〞r器自動觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)。由此 jQuery 為我們提供了兩個自動觸發(fā)事件 trigger() 和 triggerHandler() ;
語法
演示代碼
<body> <div></div> <input type="text"> <script> $(function() { // 綁定事件 $("div").on("click", function() { alert(11); }); // 自動觸發(fā)事件 // 1. 元素.事件() // $("div").click();會觸發(fā)元素的默認(rèn)行為 // 2. 元素.trigger("事件") // $("div").trigger("click");會觸發(fā)元素的默認(rèn)行為 $("input").trigger("focus"); // 3. 元素.triggerHandler("事件") 就是不會觸發(fā)元素的默認(rèn)行為 $("input").on("focus", function() { $(this).val("你好嗎"); }); // 一個會獲取焦點(diǎn)，一個不會 $("div").triggerHandler("click"); // $("input").triggerHandler("focus"); }); </script> </body>
1.3. jQuery 事件對象
jQuery 對DOM中的事件對象 event 進(jìn)行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發(fā)，就會有事件對象的產(chǎn)生。
語法
演示代碼
<body> <div></div> <script> $(function() { $(document).on("click", function() { console.log("點(diǎn)擊了document"); }) $("div").on("click", function(event) { // console.log(event); console.log("點(diǎn)擊了div"); event.stopPropagation(); }) }) </script> </body>
注意：jQuery中的 event 對象使用，可以借鑒 API 和 DOM 中的 event 。
1.4. jQuery 拷貝對象
jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API，方便易用，內(nèi)容如下。
語法
演示代碼
<script> $(function() { // 1.合并數(shù)據(jù) var targetObj = {}; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); // 2. 會覆蓋 targetObj 里面原來的數(shù)據(jù) var targetObj = { id: 0 }; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); }) </script>
1.5. jQuery 多庫共存
實際開發(fā)中，很多項目連續(xù)開發(fā)十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運(yùn)行的情況下，新的功能使用新的jQuery版本實現(xiàn)，這種情況被稱為，jQuery 多庫共存。
語法
演示代碼
<script> $(function() { // 讓jquery 釋放對$ 控制權(quán) 讓用自己決定 var suibian = jQuery.noConflict(); console.log(suibian("span")); }) </script>
相關(guān)視頻教程推薦：jQuery視頻教程
