js事件

绑定事件处理函数

1. ele.οnclick=function () {}

兼容性好，但一个元素的同一事件上只能绑定一个处理程序

基本等同于写在HTML行间

程序this指向是dom元素本身

2. obj.addEventListener(type,listener,false);

• type:字符串，事件名称，比如“click”、“mouseover”、“keydown”等。
• listener：实现了 EventListener 接口或者是 JavaScript 中的函数。
• useCapture ：是否使用捕捉，一般用 false（不捕获） 。

btn1Obj.addEventListener("click",method1,false);

IE9以下不兼容，可以为一个事件绑定多个处理程序，按照绑定顺序执行（先绑定先执行）。不能对同一个函数绑定多次执行多次。

程序this指向是dom元素本身

3. obj.attachEvent(‘on’+type,fn);

• type：字符串，事件名称，比如“click”、“mouseover”、“keydown”等。
• fn：处理程序的函数

btn1Obj.attachEvent("onclick",method1);

IE独有，一个事件同样可以绑定多个处理程序，且对同一个函数绑定多次可以执行多次，（后绑定先执行）

程序this指向是window

---

解决浏览器兼容问题

function addEvent(elm.evType，fn,useCapture){
    if(elm.addEventListener){
        elm.addEventListener(evType,fn,false);
        
    }
    else if(elm.attachEvent){
       elm.attachEvent('on'+evType,func(){
           fn.call(elem);
       });
      
    }
    else{
        elm['on'+evType]=fn; //方括号表示法
    }
}

解除事件处理程序

1. ele.οnclick=false/’’/null

var div=document.getElementsByTagName('div')[0];
div.onclick=function(){
    console.log('a');
    this.onclick=null;
} 

2. ele.removeEventListener(type,fn,false)

//高度一致，对象要对应，事件类型对应，处理的那个函数要对应
div.addEventListener('click',test,false);
function test(){
    console.log('a');
}
div.removeEventListener('click',test,false);

3. ele.detachEvent(‘on’+type,fn)
4. 若绑定匿名函数，则无法解除

事件处理模型

一个对象的一个事件类型只能处理一个事件模型，要么冒泡，要么捕获，

• 事件冒泡

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底而上）

把元素的最外面先抓住

• 事件捕获

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（++事件源元素++）。（自顶而下）

IE没有捕获事件

• 触发顺序，先捕获，后冒泡
• 捕获冒泡，谁先绑定谁先执行
• focus,blus,change,submit,reset,select等事件不冒泡

阻止事件冒泡和阻止默认事件

• 取消冒泡

  1. event.stopPropagation():W3C标准，但不支持IE9以下版本

  div.onclick=function(e){
      e.stopPropagation();
      this.style.backgroundColor="green";
  }
  

  2. IE独有event.cancelBubble=true;

  div.onclick=function(e){
  //事件对象：在每一个事件处理函数里面可以写一个形参，系统传入事件对象，这个对象上有很多个属性，每一个属性都记载着这个事件发生时的关键性数据
      e.canceBubble=true;
      this.style.backgroundColor="green";
  }
  

  3. 封装取消冒泡的函数stopBubble(event);

  div.onclick=function(e){
      stopBubble(e);
      this.style.backgroundColor="green";
  }
  function stopBubble(event){
      if(event.stopPropagation){
          event.stopPropagation();
      }else{
          event.cancelBubble=true;
      }
  }
  

• 阻止默认事件

  1. 默认事件——提交表单，a标签跳转，右键菜单等

  //oncontextmenu:右键出菜单事件
  documnt.oncontextmenu=function(){
      console.log('a');
      return false; 
  }
  

  2. return false;以对象属性的方式注册的事件才生效（只对用句柄的绑定事件有效）
  3. event.preventDefault();W3C标注，ie9以下不兼容

  documnt.oncontextmenu=function(e){
       console.log('a');
       e.preventDefault();
  }
  

  4. event.returnValue=false;兼容IE

   documnt.oncontextmenu=function(e){
       console.log('a');
       e.returnValue=false;
  }
  

  5. 封装阻止默认事件的函数:cancelHandler(event)

document.oncontextmenu=function(e){
    console.log('a');
    cancelHandler(e)
}

function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue=false;
    }
}

a标签默认的跳转：

a.onclick=function(){
    return false;
}

或者

<a href="javascript:void(0||false)">demo</a>

事件对象

• event||window.event用于IE

事件触发之后的事件对象

IE：window.event

非IE： event

• 事件源对象：（到底是谁触发的）

  1. event.target:火狐只有这个
  2. event.srcElement: IE只有这个
  3. 谷歌以上的都有

• 兼容性写法

 obj.onclick=function(e){
     var event=e||window.event;
     var target=event.target||event.srcElement;
     console.log(target);
 }

事件委托

• 利用事件冒泡和事件源对象进行处理
• 优点：
  1. 性能 不需要循环所有的元素一个个绑定
  2. 灵活 当所有新的子元素时不需要重新绑定事件