在JavaScript中,有三种常用的绑定事件的方法:
1.在DOM元素中直接绑定;
2.在JavaScript代码中绑定;
3.绑定事件监听函数。
一、DOM元素中直接绑定
鼠标单击事件 onclick ,
鼠标双击事件 ondouble,
鼠标移入事件 onmouseover,
鼠标移出事件 onmouseout 等。
二、JavaScript代码中绑定
document.getElementById('XX').onclick=function(){};
三、绑定事件监听函数
1. obj.addEventListener(event,fn,useCapture);
useCapture →Boolean值 设置事件是事件捕获执行还是事件冒泡执行,一般为事件捕获(值为false)
2. attachEvent(event,fn);
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
functionaddEvent(obj,type,handle){
try{// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{// IE8.0及其以下版本
obj.attachEvent('on'+ type,handle);
}catch(e){// 早期浏览器
obj['on'+ type]= handle;
}
}
}
同一元素绑定多次事件
1. DOM元素直接绑定,如果DOM元素绑定两个"onclick" 事件,只会执行第一个;
2. 通过js脚本中绑定多个事件,只会执行最后一个事件;
3. 用“addEventListener”绑定多个事件,按照绑定顺序都会执行。
下面扩展JQuery事件绑定的几种方法
以click事件为例,jQuery中绑定事件有三种方法:
(1)obj.click(function(){});
(2)obj.bind("click",function(){});
(3)obj.live("click",function(){});
jQuery中提供了四种事件监听方式
分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off;
【bind和live的区别】
live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bind方法的这个缺陷,它可以对后生成的元素也可以绑定相应的事件。
live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面,所谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。live方法的处理机制就是把事件绑定在DOM树的根节点上,而不是直接绑定在某个元素上。
只有在事件发生的时候,live方法才会去检测绑定事件的对象是否存在,所以live方法可以实现后来新增的元素也可实现事件的绑定。相比之下,bind会在事件在绑定阶段就会判断绑定事件的元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。