事件处理详解-蒲公英云

前言

　　本文大概整理下绑定事件的几种方式，兼容IE8- 的方式（如果需要的话），事件委托，阻止传播，取消默认行为，event对象等。

　　之前做的多是手机端页面，监听事件也一直是 addEventListener ，现代浏览器基本都支持addEventListener ，除了万恶的IE8及更低版本IE。虽说不用太管IE8了（个人愚见），但是还是有必要整理下之前兼容性的处理方式

HTML事件处理

　　在HTML标签中直接给属性设置处理程序。HTML中加入了JS代码，因为需要行为、样式、结构分离，这种方式现在已经淘汰，就不深入探究了。

1 <button onclick="alert('HTML事件处理！')">点我</button>

DOM0级事件处理

　　通过元素对象的事件属性来绑定处理程序。先看栗子

<a href="http://www.baidu.com" class="a1">快点击我！</a>
document.querySelector('.a1').onclick = function(){ //绑定事件 alert('DOM0绑定--a'); }

　　先获取到元素a，在给元素的点击事件属性onclick绑定处理程序。

　　这种方式的特点：

　　　　1、简单易用，兼容性良好，基本所有浏览器都支持

　　　　2、只能绑定一个处理程序，重复绑定会覆盖。如果给a的onclick属性再绑定一个处理程序，那么现在的这个就会被覆盖掉

　　　　3、只会在冒泡阶段触发

　　取消绑定也非常简单，直接设为null就可以了。

document.querySelector('.a1').onclick = null; //取消绑定

DOM2级事件处理

　　通过事件方法来绑定和解绑处理程序。同样看个栗子

<a href="http://www.baidu.com" class="a2">点击我！</a>
document.querySelector('.a2').addEventListener('click', function(e){ //绑定事件1 alert('DOM2绑定--a2 -- 1') }, false) document.querySelector('.a2').addEventListener('click', function(e){ //绑定事件2 alert('DOM2绑定--a2 -- 2') }, false)

　　addEventListener(eventName,listener,useCapture) 方式可以为事件绑定处理程序，第一个参数为事件类型（不带on）；第二个参数是处理程序；第三个参数可指定哪个阶段触发，false对应冒泡阶段、true对象捕获阶段（默认false），部分低版本浏览器要求这个参数不能为空，所以最好还是带上。

　　这种方式的特点：

　　　　1、可为同一个事件绑定多个处理程序，会依次触发。多次绑定同一个处理程序，只会生效一次

　　　　2、可指定触发的阶段，捕获阶段或者冒泡阶段

　　　　3、兼容IE8 - 之外的其他浏览器

　　解绑的方式为：Element.removeEventListener(eventName,listener,useCapture);和绑定的用法一致

　　IE8- 有一套自己的事件处理方法

　　　　绑定：Element.attachEvent(eventNameWithOn,listener)

　　　　解绑：Element.detachEvent(eventNameWithOn,listener)

document.querySelector('.a2').attachEvent('onclick', function(e){ alert('DOM2绑定--a2 -- 2') })

　　特点：

　　　1、事件类型带on (eg：onclick)

　　　2、只能在冒泡阶段触发

　　　3、IE10 - IE5都支持该方法

兼容性处理方式

　　两种方式的差别在事件类型和第三个参数，所以可以做一些处理，封装兼容性处理的方式

//通用方式
      //绑定
    function addEvent(targetElement,eventName,listener,useCapture){ if(targetElement.addEventListener){ targetElement.addEventListener(eventName,listener,useCapture); }else if(targetElement.attachEvent){ targetElement.attachEvent('on'  eventName,listener); }else { targetElement['on'   eventName] = listener; } } //解绑
    function removeEvent(targetElement,eventName,listener,useCapture){ if(targetElement.addEventListener){ targetElement.removeEventListener(eventName,listener,useCapture); }else if(targetElement.attachEvent){ targetElement.detachEvent('on'  eventName,listener); }else { targetElement['on'   eventName] = null; } }

　　测试一下使用，在IE8及其他浏览器都可以正常使用。

addEvent(document.querySelector('.a2'),'click',test,false) function test(e){ alert('addEvent then removeEvent!'); removeEvent(document.querySelector('.a2'),'click',test,false);  //取消绑定
    }

Event对象

　　不同的方式获取event对象的方式也不同

　　　　attachEvent绑定：通过 window.event获取event对象

　　　　其他方式（DOM0和addEventListener）：处理函数传参直接获取

function test(e){ //兼容性的方式 e = e || window.event;  //event对象
    }

　　attachEvent绑定的方式，处理程序内部this指向window。想要获取元素对象可以通过 window.event.srcElement

　　其他方式的this指向触发元素。同样的也可以通过 event.target获取

e = e || window.event;  //event对象
      var target = e.target || e.srcElement;  //触发对象

阻止传播和取消默认行为

　　通过event对象的方式取消默认行为：

　　　　event.preventDefault() //其他浏览器

　　　　event.returnValue = false //IE8-

　　DOM0级绑定的还可以直接 return false 来取消默认行为，所有浏览器都支持

　　event对象阻止传播：

　　　　event.stopPropagation() //其他浏览器

　　　　event.cancelBubble = true //IE8 -

　　一般可以这样写

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;  //阻止传播
      e.preventDefault ? e.preventDefault() : e.returnValue = false;    //取消默认行为

事件委托

　　如果多个元素的处理程序类同，如果每个都绑定一次会很繁琐和低效，这时可以利用冒泡的原理（他们都会冒泡到父元素）直接在父元素上绑定事件。即为事件委托

<section class="item item-3"> <button class="btn1">点击我1！</button><button class="btn1">点击我2！</button><button class="btn1">点击我3！</button> </section>

addEvent(document.querySelector('.item-3'),'click',function(e){ e = e || window.event;  //event对象
      var target = e.target || e.srcElement;  //触发对象
      if(target.nodeName === 'BUTTON'){ alert(target.innerText); } })