js--事件对象的理解1

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

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

---

所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定，的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分。

• 兼容DOM的浏览器

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

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

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

属性方法	类型	读写	说明
bubbles	Blooean	只读	表明事件是否冒泡
stopPropagation()	Function	只读	取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法
cancelable	Blooean	只读	表明是否可以取消事件的默认行为
preventDefault()	Function	只读	取消事件的默认行为，如果cancelable为true，则可以使用这个方法
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
target	Element	只读	事件的目标
detail	Integar	只读	与事件相关的细节信息
eventPhase	Integar	只读	调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段
trusted	Blooean	只读	为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的
type	String	只读	被触发的事件的类型
view	AbstractView	只读	与事件关联的抽象视图。等同于发生事件的window对象

• • • 成员中有两个成员比较相似：
      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包含的对象与方法

属性方法	类型	读写	说明
cancelBubble	Blooean	读/写	默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同
returnvalue	Blooean	读/写	默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同
srcElement	Element	只读	事件的目标，与DOM中的target属性相同
type	String	只读	被触发的事件类型

• • 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;
          }
      }
  
    };