jQuery 再探 event , jQuery 對於 DOM 的跨瀏覽器封裝。

時間 2019-11-13

標籤 jquery event 對於 dom 瀏覽器封裝欄目 JQuery 简体版

原文原文鏈接

Javascript再探 event 事件。javascript

咱們知道瀏覽器中有不少的差別性，好比對於瀏覽器中的 event 事件進行處理的方式， IE 明顯的就和別的瀏覽器不同。因此後來誕生了風靡前端的 jQuery 庫。我原先覺得jQuery庫只是在 jQuery 對象獲得層面對於通常的 javascript 代碼進行了跨瀏覽器整合和優化。可是今天在用的時候也發現了，對於部分的DOM 也進行了跨瀏覽器整合。下面就以我碰到的 event 作一個例子。css

在 jQuery 中進行 event handle attachment 的時候。天然會有對應的 handle 處理函數。在jQuery 中的 handle 處理函數中能夠帶入 event 參數，這裏帶入的 event 的參數的話但是 jQuery 進行了再次封裝的了。而再也不是原先的原生 dom event 了。可是 jQuery 封裝 NB 的一點就體如今，雖然對此 dom 進行了二次封裝，可是原則上仍是和 DOM 標準制定的規則保證了高度一致性，好比 event.target 和 event.currentTarget 都和 DOM 標準中的規則如出一轍。html

除了這些原 DOM 有的屬性外，固然 jQuery 也加入了本身庫中的一些特性。最爲典型的就是event.delegateTarget。官方的 API 解釋爲：Description: The element where the currently-called jQuery event handler was attached. 返回的是綁定事件的 jQuery 對象。前端

大概的介紹就介紹完了，反正在使用的時候你會感受到 jQuery 原生庫對於前端開發人員強大的便利的。不再用擔憂各個瀏覽器之間的不一樣了，真的是超級 HIGH 的一種體驗。下面介紹有關 event 的跨瀏覽器 jQuery的處理辦法。java

只須要在 attachment 函數中的 handle 處理函數的參數加上 event 參數，就能夠在 handle 處理方法中使用 jQuery 給予的跨瀏覽器 event 對象。jquery

在 IE 瀏覽器下：瀏覽器

不使用 jQuery – eventdom

和使用 jQuery – event 差異巨大，具體直接可見代碼。函數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">優化

<head>

<title>IE下 event.target 探究</title>

</style>

$(document).ready(function(){

/* not use event as parameter */

$("#t1").delegate(".cont","click",function(){

// 這裏 function 中的 event 是原生 DOM event 對象，因此各個瀏覽器實現的方式可能會有區別

alert(event.target); // return undefined

// 爲了驗證這個是 DOM event 使用以下代碼能夠看出。

// IE 獨有 srcElement ，至關於標準 DOM 中的 event.target

alert(event.srcElement); // return standard event.target

});

/* use event as parameter */

$("#t2").delegate(".cont","click",function(event){

// 這裏 function 中的 event 是 jQuery 對 event 作了跨瀏覽器封裝

// 在全部瀏覽器下效果一致

alert(event.target); // retrun standard event.target

});

</script>

</head>

<body>

<legend>element handler without parameter</legend>

<tr>

</tr>

</table>

<br />

<legend>element handler with parameter event</legend>

<tr>

</tr>

</table>

</body>

</html>

代碼的運行效果已經在 return 中標誌出來了。你們有時間的話能夠拷貝代碼運行一下。很容易就可以看出區別了。

這樣提醒咱們，假如之後再寫事件處理函數的時候必定要記住在處理方法中加入 event參數。這樣寫起來事半功倍。不會形成跨瀏覽器的一些低級錯誤。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE 下 event.target 探究</title>

<style type="text/css">

</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	/* not use event as parameter */
	$("#t1").delegate(".cont","click",function(){
		// 這裏 function 中的 event 是原生 DOM event 對象，因此各個瀏覽器實現的方式可能會有區別
		alert(event.target);	// return undefined

		// 爲了驗證這個是 DOM event 使用以下代碼能夠看出。
		// IE 獨有 srcElement ，至關於 標準 DOM 中的 event.target
		alert(event.srcElement);	// return standard event.target 

	});

	/* use event as parameter */
	$("#t2").delegate(".cont","click",function(event){
		// 這裏 function 中的 event 是 jQuery 對 event 作了跨瀏覽器封裝
		// 在全部瀏覽器下效果一致
		alert(event.target);		// retrun standard event.target 
	});

});
</script>
</head>
<body>

	<table id="t1">
		<legend>element handler without parameter</legend>
		<tr>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
		</tr>	
	</table>
	<br />
	<table id="t2">
		<legend>element handler with parameter event</legend>
		<tr>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
			<td class="cont"><div><input type="checkbox" />333</div></td>
		</tr>	
	</table>

</body>
</html>