溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jquery中如何對(duì)事件進(jìn)行綁定和解綁，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
jQuery事件綁定和解綁
1.1. jQuery 事件注冊(cè)
jQuery 為我們提供了方便的事件注冊(cè)機(jī)制，是開發(fā)人員抑郁操作優(yōu)缺點(diǎn)如下：
優(yōu)點(diǎn): 操作簡(jiǎn)單，且不用擔(dān)心事件覆蓋等問題。
缺點(diǎn): 普通的事件注冊(cè)不能做事件委托，且無法實(shí)現(xiàn)事件解綁，需要借助其他方法。
語法
演示代碼
<body>
<div></div>
<script>
$(function() {
// 1. 單個(gè)事件注冊(cè)
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>1.2. jQuery 事件處理
因?yàn)槠胀ㄗ?cè)事件方法的不足，jQuery又開發(fā)了多個(gè)處理方法，重點(diǎn)講解如下：
on(): 用于事件綁定，目前最好用的事件綁定方法
off(): 事件解綁
trigger() / triggerHandler(): 事件觸發(fā)
1.2.1 事件處理 on() 綁定事件
因?yàn)槠胀ㄗ?cè)事件方法的不足，jQuery又創(chuàng)建了多個(gè)新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()
語法
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以綁定1個(gè)或者多個(gè)事件處理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以實(shí)現(xiàn)事件委托（委派）
// click 是綁定在ul 身上的，但是 觸發(fā)的對(duì)象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以給未來動(dòng)態(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)某個(gè)事件上面的邏輯，在特定需求下不需要的時(shí)候，可以把該事件上的邏輯移除，這個(gè)過程我們稱為事件解綁。jQuery 為我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發(fā)一次的事件綁定方法 one()，在這里我們重點(diǎn)講解一下 off() ;
語法
演示代碼
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是一個(gè)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(); // 這個(gè)是解除了div身上的所有事件
$("div").off("click"); // 這個(gè)是解除了div身上的點(diǎn)擊事件
$("ul").off("click", "li");
// 2. one() 但是它只能觸發(fā)事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>1.2.4. 事件處理 trigger() 自動(dòng)觸發(fā)事件
有些時(shí)候，在某些特定的條件下，我們希望某些事件能夠自動(dòng)觸發(fā), 比如輪播圖自動(dòng)播放功能跟點(diǎn)擊右側(cè)按鈕一致?？梢岳枚〞r(shí)器自動(dòng)觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)。由此 jQuery 為我們提供了兩個(gè)自動(dòng)觸發(fā)事件 trigger() 和 triggerHandler() ;
語法
演示代碼
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 綁定事件
$("div").on("click", function() {
alert(11);
});
// 自動(dòng)觸發(fā)事件
// 1. 元素.事件()
// $("div").click();會(huì)觸發(fā)元素的默認(rèn)行為
// 2. 元素.trigger("事件")
// $("div").trigger("click");會(huì)觸發(fā)元素的默認(rèn)行為
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會(huì)觸發(fā)元素的默認(rèn)行為
$("input").on("focus", function() {
$(this).val("你好嗎");
});
// 一個(gè)會(huì)獲取焦點(diǎn)，一個(gè)不會(huì)
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>1.3. jQuery 事件對(duì)象
jQuery 對(duì)DOM中的事件對(duì)象 event 進(jìn)行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發(fā)，就會(huì)有事件對(duì)象的產(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 對(duì)象使用，可以借鑒 API 和 DOM 中的 event 。
1.4. jQuery 拷貝對(duì)象
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. 會(huì)覆蓋 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 多庫(kù)共存
實(shí)際開發(fā)中，很多項(xiàng)目連續(xù)開發(fā)十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時(shí)就需要保證在舊有版本正常運(yùn)行的情況下，新的功能使用新的jQuery版本實(shí)現(xiàn)，這種情況被稱為，jQuery 多庫(kù)共存。
語法
演示代碼
<script>
$(function() {
// 讓jquery 釋放對(duì)$ 控制權(quán) 讓用自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>以上是“jquery中如何對(duì)事件進(jìn)行綁定和解綁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼