再看jquery事件绑定和取消

因为早期jquery版本事件绑定比较混乱，因此从jquery1.7后推荐统一使用on()绑定事件，on()是bind(), live(), delegate()方法的替代品。
值得注意的是：on不仅仅作用于当前已经存在的元素，对于未来用JS动态创建的元素也会有同样的作用（其实就是之前的live和delegate的功能）。
如果要移除on()事件，请用off()

使用情景一：直接给已经存在的元素绑定事件

$("#mydiv").on("click",function(e){ 
    $(this).html("Holle world."); 
  }) ;

 //为#mydiv绑定了两个事件，多个事件空格分开
 $("#mydiv").on("click  mousemove",function(){ 
    $(this).html("Holle world."); 
  })

注意：这里的e是jquery优化后的事件对象，因为原生态的事件对象有兼容性问题。经常用事件对象来做的两件事情：

1、消除默认事件操作。比如，点击a标签，可以让页面不跳转。因为，默认事件可能会影响到我们的效果。

 e.preventDefault();  // 阻止默认事件

2、阻止事件冒泡。比如有一个结构 div>p。点击p标签，其实也是点击了div，这就叫事件冒泡。但是我们只想点击p，不想点击div，就要阻止事件冒泡。

 e.stopPropagation();  // 阻止事件冒泡

使用情景二：给未来产生的元素绑定事件。

尤其是在ajax异步加载内容上，用的很多。异步加载的结构，在之前是没有的，是后面根据需要动态生成的。这里面标签要添加事件，使用上面的方法是不行的，需要改进下。

比如，一个ul下面要动态生成一些内容，为ul绑定了两个事件以及两个触发对象 li 和 mydiv 的类，触发对象需是 ul 的后代元素，中间用逗号分开

 $("ul").on("click mouseover", "li , .mydiv", function (e) {
        alert(e);
    })

取消绑定的事件请用off()

怎么绑定的就怎么取消。就上面的代码，取消的方式：

$("#mydiv").off() ;                     // 取消#Mydiv上所有的事件
$("#mydiv").off("click") ;               // 只取消click事件
$("#mydiv").off("click  mousemove");      // 取消click 和 mousemove事件
$("ul").off("click mouseover", "li , .mydiv");  // 取消动态生成标签上的事件

但是在取消事件的时候，存在个隐患。万一别人也某个标签添加了事件，也可能会被一同取消。所以这个时候，就要用到jquery事件的命名空间。

// 把事件绑定在命名空间上
$("#mydiv").on("click.myspace",function(){
         console.info("space");
     });

// 取消命名空间上的click事件
$("#mydiv").off("click.myspace");    

// 取消命名空间上的所有事件
$("#mydiv").off(".myspace");    

// 命名空间上的click事件也会被取消
$("#mydiv").off("click");

这里的 click.myspace 中的 .myspace 就是命名空间。为了保证安全的添加和取消事件，在项目中，我们往往就会用到事件的命名空间。

再看jquery事件绑定和取消

猜你喜欢