javascript事件侦听器

javascript事件侦探器

• 先了解一下事件冒泡的现象
  事件执行3个过程：捕获阶段(在找目标元素)、目标阶段(找到目标元素并执行他的事件)、冒泡阶段(离开目标)其他元素的事件默认会在冒泡阶段执行
• 解决事件冒泡方案：事件侦听器

obj.addEventListener(type,handle,false);
 参数1：给元素绑定不加on的事件类型。
 参数2：处理事件的函数 
 参数3：是否在冒泡阶段执行，true在捕获阶段执行，false在冒泡阶段执行，默认值是false.

• 低版本IE中不存在捕获阶段，只有目标阶段和冒泡阶段。
  事件侦听器在低版本IE中的语法：

 元素.attachEvent("on加事件类型",处理函数);

• 兼容写法

 if(ele.addEventListener){ 
        ele.addEventListener(type,handler);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler);
    }else{
        ele.onclick=handler;
    }

• 封装函数 - 通用的绑定事件的方法

function bind(ele,type,handler){
    if(ele.addEventListener){ // 如果有 - true ，如果没有 undefined - false
        ele.addEventListener(type,handler);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler);
    }else{
        ele.onclick=handler;
    }
}