jquery事件監聽有哪幾種方式-前端問答-PHP中文網

首頁

web前端

前端問答

jquery事件監聽有哪幾種方式

青灯夜游

Jun 10, 2022 pm 01:55 PM

jquery

jQuery中提供了四種事件監聽方式：1、使用bind()，可以為被選元素添加一個或多個事件處理程序，並設定事件處理函數；2、使用live()，可以為目前或未來的符合元素新增一個或多個事件處理器，並設定處理函數；3、使用delegate()，可以為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序；4、使用on()，可以在被選元素及子元素上新增一個或多個事件處理程序。

jquery事件監聽有哪幾種方式

本教學操作環境：windows7系統、jquery3.6版本、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>

jquery事件監聽有哪幾種方式

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>

jquery事件監聽有哪幾種方式

注意：live() 方法在jQuery 版本1.7 中被廢棄，在版本1.9 中移除。請使用 on() 方法代替。

3、delegate

delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於目前或未來的元素（例如由腳本建立的新元素）。

語法：

delegate(selector,type,[data],fn)

特點：更精確的小範圍使用事件代理，效能優於.live()。可以用在動態新增的元素上。

("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素

實例：當點擊

元素內部的

元素時，改變所有

元素的背景顏色

<!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>

jquery事件監聽有哪幾種方式

#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事件監聽有哪幾種方式