因为早期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 就是命名空间。为了保证安全的添加和取消事件,在项目中,我们往往就会用到事件的命名空间。