Javascript事件补充

事件绑定

addEventListener() //监听器（不兼容IE8）
通过这个方法可以为元素绑定事件响应函数

参数：
1.事件的字符串，不用加on //click、mouserover等
2.回调函数，但事件触发时该函数被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都为false

btn.addEventListener('click',function(){
		alert(1);    //1
	},false);

btn.addEventListener('click',function(){
		alert(2);    //2
	},false);
	//两个函数都会触发

优点：
可以绑定多个事件

attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，需要on
2.回调函数
这个函数也可以同时为一个事件绑定多个函数，不同的是他是后绑定的先执行，执行顺序和addEventListener()相反。

处理兼容性问题：

定义一个函数，用来为指定的元素绑定响应函数

function bind(obj,eventStr,callback){
		if(obj.addEventListener){
			obj.addEventListener(eventStr,callback,false);
		}else{
		obj.attachEvent('on' + eventStr,function(){
				callback.call(obj);
			})
		}
	}

因为IE下使用attachEvent时，this指向的是window，而在其他浏览器中使用addEventListener时，this指向的是obj，所以为了统一this指向问题，用call方法改变this的指向。

====================================
事件的传播
事件的三个阶段：
1.捕获阶段：
在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但是默认此时不会触发事件。
2.目标阶段：
事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3.冒泡阶段：
事件从目标元素向它的祖先元素传递，一次触发祖先元素上的事件。
如果希望在捕获阶段触发事件时，需要将addEventListener()方法的第三个参数设置为true
一般情况不会希望在捕获阶段触发事件，所以这个参数一般都为false。（在IE8的情况下没有捕获这一步，直接是冒泡）

猜你喜欢