A-A+

jquery卸载全部事件的思路及实例

2016年01月11日前端设计暂无评论阅读 5 views 次

有时我们的网页要求删除全部事件，不过js不支持匿名卸载事件，我们可以用jq来实现，本文提供了实现思路及删除已经存在事件的实例,原生js不支持匿名卸载事件的,jquery为了开发者好用支持了匿名的.

匿名事件的思路

首先她会判断目标是否是元素或者对象,如果是元素,则在元素上打一个标识(expando)然后值是生成的一个guid,并在缓存对象下建立一个缓存,比如:

$.cache={
'2': {
data: {},
events: {},
handle: function(){}
},
}

然后会在你触发元素事件时拿元素上的标识去往缓存里的events里找,并会有是否委托,选择器等判断,然后最终触发,卸载的时候其实是拿缓存里的handle卸载的,因为是一个...如果目标不是元素,比如是一个window那么她会直接往目标上添加标识,比如:window[$.expando],其实事件跟缓存有很深的关系

卸载全部事件

清空标识,这里的标识包括元素上的和对象上的.

$('*').add(window).each(function(){
try{
delete this[$.expando];
}<a href="/tags.php/catch/" target="_blank">catch</a>(e){}
});

ps:因为window不是元素,但会有一些事件,比如scroll,resize等

删除缓存

这里的缓存包括元素的缓存和对象缓存

window[$.expando] = {}
$.cache = {};

jquery删除已存在的事件实例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var fn = $("#exportCsv").attr( "onclick" ); // 获取原事件
$("#exportCsv").unbind('click').removeAttr('onclick'); // 删除原事件
$("#exportCsv").bind( "click", function() { // 绑定新事件
alert( "新事件" );
});
$("#exportCsv").bind( "click", fn ); // 绑定原事件
});
</script>
</head>
<body>
<table>
<tr>
<td nowrap="nowrap" class="exportTool" >
<input type="button" id="exportCsv" alt="导出CSV" title="导出为CSV文件" value="导出CSV" onclick="alert('原有事件');"/>
</td>
</tr>
</table>
</body>
</html>

夏日博客