5-3 卸载事件off()方法
本节编程练习不计算学习进度,请电脑登录imooc.com操作

卸载事件off()方法

根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁

$("elem").off()

 

 

任务

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title></title>
  7. <style>
  8. .left div,
  9. .right div {
  10. width: 100%;
  11. height: 50px;
  12. padding: 5px;
  13. margin: 5px;
  14. float: left;
  15. border: 1px solid #ccc;
  16. }
  17.  
  18. .left div {
  19. background: #bbffaa;
  20. }
  21.  
  22. .right div {
  23. background: yellow;
  24. }
  25. </style>
  26. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  27. </head>
  28.  
  29. <body>
  30. <h2>删除事件</h2>
  31.  
  32.  
  33. <h4>测试一</h4>
  34. <div class="left">
  35. on('mousedown mouseup')
  36. <div class="aaron">点击触发</div>
  37. </div>
  38. <button>点击删除mousedown事件</button>
  39. <script type="text/javascript">
  40. var n = 0;
  41. //绑定事件
  42. $(".aaron:first").on('mousedown mouseup', function(e) {
  43. $(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
  44. ++n;
  45. })
  46.  
  47. //删除事件
  48. $("button:first").click(function() {
  49. $(".aaron:first").off('mousedown')
  50. })
  51.  
  52. </script>
  53.  
  54.  
  55.  
  56. <h4>测试一</h4>
  57. <div class="left">
  58. on('mousedown mouseup')
  59. <div class="aaron">点击触发</div>
  60. </div>
  61. <button>点击销毁所有事件off</button>
  62. <script type="text/javascript">
  63. var n = 0;
  64. //绑定事件
  65. $(".aaron:last").on('mousedown mouseup', function(e) {
  66. $(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
  67. ++n;
  68. })
  69.  
  70. //删除事件
  71. $("button:last").click(function() {
  72. $(".aaron:last").off()
  73. })
  74.  
  75. </script>
  76. </body>
  77.  
  78. </html>
  79.  
下一节