事件处理详解

2018-06-24 00:35:45来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

前言

  本文大概整理下绑定事件的几种方式,兼容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);
      }
    })

  本例中,想要实现点击按钮输出按钮文字。如果给三个按钮分别绑定事件会不会太傻。所以直接绑定了父元素,事件触发时,判断触发对象是否是button标签,如果是,则输出文字。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:浏览器内的事件队列

下一篇:[js插件开发教程]原生js仿jquery架构扩展开发选项卡插件