js--事件对象的理解1

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

• 举例
  鼠标操作导致的事件对象中，会包含鼠标位置的信息，
  键盘操作导致的事件对象中，会包含按下的键有关的信息，

• 兼容DOM的浏览器

    function handler(){
        alert(event.type);
    };
    EventUtil.addHandler(btn,‘click‘,handler);//接上篇笔记

  event：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，该对象都是该事件内置对象，可以在事件处理函数内直接使用。
  this：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，都是指向当前正在处理事件的那个元素。

  • 列举所有事件的事件对象，都会有的成员。

• • • 成员中有两个成员比较相似：
      currentTarget:this对象始终等于他的值，随着事件冒泡或者捕获，他得值等于捕获或冒泡到的上级元素的值。
      target：只包含事件的实际目标。
    • type
      可以利用type属性为一个元素同时添加多类事件处理程序。
      采用dom0级试试

       var btn=document.getElementById(‘d1‘);
       var handler=function(){
        switch(event.type){
            case "click":
                alert("clicked");
                break;
      
            case "mouseover":
                event.target.style.background=‘red‘;
                break;
            case "mouseout":
                event.target.style.background=‘yellow‘;
                break;
        }
      };
      btn.onclick=handler;
      btn.onmouseover=handler;
      btn.onmouseout=handler;
      

      　　

    • cancelable、preventDefault()
      只有cancelable为true时，才可以使用preventDefault()方法，来取消其默认行为。

        <a href="http://www.baidu.com/" id="myherf">百度</a>
        var Link=document.getElementById("myherf");
        Link.onclick=function(){
           event.preventDefault();
        }

      这样单击百度时，并不会跳转到百度的页面。

    • stopPropagation()
      立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。

       function handler(){
           alert(event.type);
           event.stopPropagation();
       };

    • eventPahse
      用来确定事件当前位于事件流的哪个阶段

        var btn=document.getElementById(‘d1‘);//body内的div
        var wrap=document.getElementById(‘wrap‘);//body
        function handler(){
            alert(event.eventPhase)
        };
        //单击btn
        btn.addEventListener(‘click‘,handler,false);//2处于目标对象
        wrap.addEventListener(‘click‘,handler,false);//3冒泡阶段
        wrap.addEventListener(‘click‘,handler,true);//1捕获
      

      　　

      event对象只有在事件处理程序执行期间，才会存在，执行完毕即销毁。

• IE中的事件对象
  在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法添加事件处理程序。
  • event
    • dom0级方法中：

        var div=document.getElementById("test");
        div.onclick=function(){
            var event=window.event;//event为window对象
            alert(event.type);
        }

    • 使用IE的专属添加事件的方法，event对象作为事件处理程序的内部对象。可以直接使用event.type。
    • html指定：event对象同样也包含于创建他的事件相关的属性和方法。
  • this
    • dom0级方法中
      this等于正在处理事件的那个元素。
    • 使用IE的专属
      this等于全局对象
    • html指定
      如果是在标签上直接使用this，那么等于正在处理事件的那个元素。如果是使用标签上指定函数，那么函数内的this指的是window。

看到了分歧，结果是必然要编写一个可以跨浏览器的。

• IE的event包含的对象与方法

• • returnvalue

        var div=document.getElementById("test");
        div.onclick=function(){
            window.event.returnValue=false;
        }

    但是没有办法判定默认事件能否被取消。

  • cancelBubble

        var div=document.getElementById("test");
        div.onclick=function(){
            alert(‘ok‘)
            window.event.cancelBubble=true;
        }

    因为IE8及以前只支持冒泡所以只能取消冒泡。

• 跨浏览器的事件对象
  这个面试会问道的，写一个通用的事件侦听函数！就写下面的就可以！bingo！

   var EventUtil={
      getEvent:function(event){
          return event||window.event;
      },
      getTarget:function(event){
          return event.target||event.srcElement;
      },
      preventDefault:function(){
          if(event.preventDefault){
              event.preventDefault();
          }else{
              event.returnValue=false;
          }
      },
      stopPropagation:function(){
          if(event.stopPropagation){
              event.stopPropagation();
          }else{
              event.cancelBubble=true;
          }
      },
      addHandler:function(element,type,handler){
          if(element.addEventListener){
              element.addEventListener(type,handler,false);
          }else if(element.attachEvent){
               element["e"+type]=function(){
                handler.call(element)
            }
              element.attachEvent("on"+type,element["e"+type]);
          }else{
              element["on"+type]=handler;
          }
      },
      removeHandler:function(element,type,handler){
          if(element.removeEventListener){
              element.removeEventListener(type,handler,false);
          }else if(element.detachEvent){
              element.detachEvent("on"+type,element["e"+type]);
    element["e"+type]=null;
          }else{
              element["on"+type]=null;
          }
      }
  
    };