JS—事件对象

在触发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.οnclick=handler;
btn.οnmοuseοver=handler;
btn.οnmοuseοut=handler;

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

<a href="http://www.baidu.com/" id="myherf">百度</a>
  var Link=document.getElementById("myherf");
  Link.οnclick=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级方法中：

属性方法	类型	读写	说明
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.οnclick=function(){
        window.event.returnValue=false;                
    }

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

• cancelBubble 

   var div=document.getElementById("test");
      div.οnclick=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;
        }
    }

  };

　　

转载于:https://www.cnblogs.com/tk900123/p/5147904.html