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>