溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jquery事件監聽的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jquery事件監聽的方式有哪些”吧!
jQuery中提供了四種事件監聽方式：1、使用bind()，可以為被選元素添加一個或多個事件處理程序，并設置事件處理函數；2、使用live()，可以向當前或未來的匹配元素添加一個或多個事件處理器，并設置處理函數；3、使用delegate()，可以為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序；4、使用on()，可以在被選元素及子元素上添加一個或多個事件處理程序。
本教程操作環境：windows7系統、jquery3.6.0版本、Dell G3電腦。
jQuery提供了多種綁定事件的方式，每種方式各有其特點，明白了它們之間的異同點，有助于我們在寫代碼的時候進行正確的選擇，從而寫出優雅而容易維護的代碼。下面我們來看下jQuery中綁定事件的方式都有哪些。
jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off
1、blind
定義和用法：為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的函數。
語法：
$(selector).blind("事件類型"，data,function(){});
//data是傳入函數的參數用event.data獲取（平時用的.click()等都是其簡化用法）特點
適用于靜態頁面，只能給調用它時已存在的元素綁定，不能給未來新增的元素綁定
當頁面加載完時，才進行blind；
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").bind("click", function() {
console.log("這個段落被點擊了。");
});
});
</script>
</head>
<body>
<p>點我！</p>
</body>
</html>
2、live
定義：向當前或未來的匹配元素添加一個或多個事件處理器；
語法：
live("事件類型",data, 函數名);//data可選特點：live并沒有將事件綁定到自身（this）上，而是綁定到this.context上
正是利用了事件委托機制完成事件的監聽處理，把節點的處理委托給 document
新添加的元素不必再綁定一次監聽器，可多事件處理
只能放在直接選擇的元素的后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").live("click", function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>這是一個段落。</p>
<button>點我!</button>
<br><br>
</body>
</html>
注意：live() 方法在 jQuery 版本 1.7 中被廢棄，在版本 1.9 中被移除。請使用 on() 方法代替。
3、delegate
delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。
語法：
delegate(selector,type,[data],fn)
特點：更精確的小范圍使用事件代理，性能優于.live()。可以用在動態添加的元素上。
("父級選擇器").delegate(".a","click",function())//表示：.a的事件通過父級元素進行委托，(this)獲取的是觸發事件的子元素實例：當單擊 <div> 元素內部的 <p> 元素時，改變所有 <p> 元素的背景顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("div").delegate("p", "click", function() {
$("p").css("background-color", "pink");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>這個段落在 div 元素內。</p>
</div>
<p>這是一個段落。</p>
</body>
</html>
4、on
定義：將監聽事件綁定到就近父級元素
語法：
on(type, 選擇器，方法)
特點：
給父元素底下新添加的標簽也可以用監聽事件
也支持多時事件處理
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("p").on("click", function() {
console.log("段落被點擊了。");
});
});
</script>
</head>
<body>
<p>點擊這個段落。</p>
</body>
</html>
到此，相信大家對“jquery事件監聽的方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
