A-A+

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

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

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

匿名事件的思路

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

  1. $.cache={  
  2.     '2': {  
  3.         data: {},  
  4.         events: {},  
  5.         handle: function(){}  
  6.     },  
  7. }  

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

卸载全部事件

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

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

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

删除缓存

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

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

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

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <title>Insert title here</title>  
  5. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>src="jquery.js"></script>  
  6. <script type="text/javascript">  
  7. $(document).ready(function(){  
  8.       var fn = $("#exportCsv").attr( "onclick" ); // 获取原事件  
  9.        $("#exportCsv").unbind('click').removeAttr('onclick');  // 删除原事件  
  10.        $("#exportCsv").bind( "click", function() {   // 绑定新事件  
  11.             alert( "新事件" );  
  12.        });  
  13.        $("#exportCsv").bind( "click", fn ); // 绑定原事件  
  14.    });  
  15. </script>  
  16. </head>  
  17. <body>  
  18. <table>  
  19. <tr>  
  20. <td nowrap="nowrap"  class="exportTool" >  
  21. <input type="button"  id="exportCsv"  alt="导出CSV"  title="导出为CSV文件" value="导出CSV" onclick="alert('原有事件');"/>  
  22. </td>  
  23. </tr>  
  24. </table>  
  25. </body>  
  26. </html>  
标签:

给我留言