事件处理函数的三种方式

方法一：<button class='box' onclick='test()'></button>
方法二：var oBtn=document.getElementsByTagName('button')[0];
oDiv.onclick=function(){} 
方法二的优先级大于方法一
方法三：IE9一下不支持
oBtn.addEventListener('click',function(){
  //可以绑定多个事件处理函数，前面两种方式连续定义两个事件处理函数，第二个会覆盖第一个
  //但是这种方式绑定的都会执行
},false)
下面只会打印一个'1'
oBtn.addEventListener('click',test,false)
oBtn.addEventListener('click',test,false)
function test(){console.log('1')} //因为是同一个事件处理函数
方法四：IE8以及一下处理函数 (随便看一下)
elem.attachEvent(事件类型，事件处理函数)
oBtn.attachEvent('onclick',function(){
})

事件执行环境

oBtn.onclick=function(){console.log(this)//指向 oBtn}
oBtn.addEventListener('click',function(){//this指向oBtn},false)
oBtn.attachEvent('onclick',function(){
  //this指向window
  test.call(oBtn)
})

事件函数的封装

var oBtn=document.getElementsByTagName('button');
addEvent(oBtn,'click',function(){})
function addEvent(el,type,fn){
  if(el.addEventListener){
    el.addEventListener(type,fn,false);
  }else if(el.attachEvent){
    el.attachEvent('on'+type,function(){
      fn.call(el);
    })
  }else{
    el['on'+type]=fn;
  }
}

解除事件

elem.onclick=null/false;
element.removeEventListener('click',test,false);
element.detachEvent('onclick',test)

argument.callee获取运行函数的引用

oBtn.addEventListener('click',function(){
  this.className='got';
  this.innerHtml='已领取';
  this.removeEventListener('click',arguments.callee,false)
},false)

冒泡捕获

从子元素往父元素上冒泡
<div class='wrapper'>
  <div class='outer'>
    <div class='inner'></div>
  </div>
</div>
var wrapper=document.getElementsByClassNAme('wrapper')[0];
var outer=document.getElementsByClassNAme('outer')[0];
var inner=document.getElementsByClassNAme('inner')[0];
wrapper.addEventListener('click',function(){console.log('wrapper')},false)
outer.addEventListener('click',function(){console.log('outer')},false)
inner.addEventListener('click',function(){console.log('inner')},false)
点击wrapper:wrapper
点击outer：outer wrapper
点击inner：inner outer wrapper
子元素往父元素上冒泡，要在父元素上也绑定事件，有则执行，没有则继续冒泡

事件捕获

从父元素一层一层往子元素触发
<div class='wrapper'>
  <div class='outer'>
    <div class='inner'></div>
  </div>
</div>
var wrapper=document.getElementsByClassNAme('wrapper')[0];
var outer=document.getElementsByClassNAme('outer')[0];
var inner=document.getElementsByClassNAme('inner')[0];
wrapper.addEventListener('click',function(){console.log('wrapper')},true)
outer.addEventListener('click',function(){console.log('outer')},true)
inner.addEventListener('click',function(){console.log('inner')},true)
点击inner：wrapper outer inner
如果一个元素既绑定冒泡又绑定捕获，则先执行捕获，事件源不存在捕获与冒泡
先绑定谁就先执行谁，事件源只有传递的作用

没有捕获的事件类型

focus blur change submit reset select

ie浏览器没有事件捕获

阻止冒泡默认事件

w3c:e.stopPropagation();
ie:e.cancelBubble=true;
ie8: event在window上
outer.addEventListener('click',function(e){
   var e=e||window.event
   e.stopPropagation(); //阻止事件冒泡
  )},false)

阻止冒泡的封装方法

function cancelBubble(e){
  var e=e||window.event;
  if(e.stopPropagation){
    e.stopPropagation();
  }else{
    e.cancelBubble=true;
  }
}

取消默认事件

取消默认事件
document.oncontextmenu=function(){ //浏览器鼠标右键
  return false;
  //w3c: e.preventDefault() iE9一下不兼容
  //e.retrunValue=false Ie9一下
}
a的默认事件是跳转什么都不写就是刷新
<a href=value>百度一下</a>
value:'javascript:void(0)'
':;'
'#' 锚点 后面什么都不写就会回到顶部
<a href='http://www.baidu.con' target='_blank'>
  <div class='inner'>点击</div>
</a>
var inner=document.getElementsByClassName('inner')[0];
inner.onclick=function(e){
  var e=e||window.event;
  e.preventDefault();
}
点击div的时候不会提交，其他地方可以提交，因为div部分的默认提交部分被阻止了