jquery中怎樣對事件進行綁定和解綁？ （代碼詳解）
- WBOY轉載
- 2021-12-15 18:34:252305瀏覽
在之前的文章《18個你需要知道的JavaScript優化技巧》中，我們介紹了JavaScript中的一些小技巧，這篇文章我們一起來看一下怎樣對jquery事件進行綁定和解綁的相關知識，希望對大家有幫助。
jQuery事件綁定和解綁定
1.1. jQuery 事件註冊
jQuery 為我們提供了方便的事件註冊機制，是開發人員憂鬱操作優缺點如下：
優點: 操作簡單，且不用擔心事件覆蓋等問題。
缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。
語法
示範程式碼
<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又發展了多個處理方法，重點講解如下：
#on(): 用於事件綁定，目前最好用的事件綁定方法
off(): 事件解綁
#trigger() / triggerHandler(): 事件觸發
#1.2.1 事件處理on() 綁定事件
因為普通註冊事件方法的不足，jQuery又建立了多個新的事件綁定方法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可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>1.2.3. 事件處理off() 解綁事件
當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。 jQuery 為我們提供了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有隻觸發一次的事件綁定方法one()，在這裡我們重點講解一下off() ;
語法
示範程式碼
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>1.2.4.事件處理trigger() 自動觸發事件
#有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 例如輪播圖自動播放功能跟點擊右側按鈕一致。可利用定時器自動觸發右側按鈕點擊事件，不必滑鼠點擊觸發。由此jQuery 為我們提供了兩個自動觸發事件trigger() 和triggerHandler() ;
#示範程式碼
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>1.3. jQuery 事件物件
jQuery 對DOM中的事件物件event 進行了封裝，相容性更好，取得更方便，使用變化不大。事件被觸發，就會有事件物件的產生。
語法
示範程式碼
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>注意：jQuery中的 event 物件使用，可以參考 API 和 DOM 中的 event 。
1.4. jQuery 拷貝物件
jQuery中分別為我們提供了兩套快速取得和設定元素尺寸和位置的API，方便易用，內容如下。
語法
示範程式碼
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>1.5. jQuery 多函式庫共存
##實際開發中，許多專案連續開發十多年，jQuery版本不斷更新，最初的jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況稱為，jQuery 多庫共存。 語法
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>相關影片教學推薦：以上是jquery中怎樣對事件進行綁定和解綁？ （代碼詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！