事件对象——DOM中的事件对象

Posted 2021-03-12 syinho

触发DOM上的交互事件会生成一个event对象，用以保存事件的信息。比如鼠标交互的事件会保存鼠标的位置，键盘交互的事件会保存键的值。

 

1.DOM0级和DOM2级事件处理程序在进行事件处理时都会有一个event对象传入。例如event.type会保存事件类型名称。

2.html事件处理程序中的变量event保存有event对象。

3.event对象的属性和方法：

　　1.bubbles。布尔值，用以表明事件是否冒泡。

　　2.cancelable。布尔值，用以表明是否可以取消事件的默认行为。通常和preventDefault()配合使用。

　　3.defaultPrevented。布尔值，值为true表明已经调用了preventDefault()。（DOM3新增）

　　4.trusted。布尔值，值为true表明事件是浏览器生成的，false表明是开发者通过js创建的。（DOM3新增）

　　5.currentTarget。Element，事件处理程序当前正在处理事件的那个元素，也就是说事件处理程序被添加的那个元素，即事件处理处理程序的this值的指向。

　　6.target。Element，事件的目标。

　　7.detail。与事件相关的细节信息。

　　8.eventPhase。调用事件处理程序的阶段。1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段。

　　9.preventDefault()。取消事件的默认行为，前提要求是cancelable值为true。

　　10.stopPropagation()。取消事件的进一步捕获或冒泡。前提要求bubbles值为true。

　　11.stopImmediatePropagation()。取消事件进一步冒泡，并阻止任何事件处理程序调用。（DOM3新增）。

　　12.type。事件类型。

4.event对象的target、currentTarget和元素的this关系。

　　event.currentTarget永远指的是事件处理程序执行环境所在作用域，即事件处理程序被添加到的那个元素。如果事件处理程序添加到目标元素，那么event.currentTarget与event.target与this彼此是全等关系。

　　如果事件处理程序没有被添加到目标元素上，比如被添加到body元素上，那么event.currentTarget与this是全等关系，它们都指向body元素，而event.target指向的是目标元素。

5.通过一个函数来处理多个事件

(在事件处理程序中利用switch判断event.type类型，对不同的事件类型赋予不同的处理方式，然后通过对目标元素添加DOM0级事件处理程序)

var btn=document,getElementById("btn");
var handler=(event)=>{
    switch(event.type){
        case "clcik":
            alert("clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor="red";
            break;
        case "mouseout":
            event.target.style.backgroundColor="";
            break;
    }
};
btn.onclick=handler;
btn.mouseover=handler;
btn.mouseout=handler;

6.阻止特定事件的默认行为

var link=document.getElementById("a");
link.onclick=(event)=>{
　　event.cancelable=true;
    event.preventDefault();
};

7.当目标元素的父元素上有事件处理程序时，通过event.stopPropagation（）阻止目标元素事件冒泡。

var btn=document.getElementById("btn");
btn.onclick=(event)=>{
    //some code
    event.stopPropagation();
};
//阻止事件冒泡，但处于目标阶段时仍会进行事件处理
document.body.onclick=(event)=>{
    //some code
};
//body上的事件处理程序不会被调用。

8.使用event.eventPhase属性查询事件流处于哪个阶段

btn.onclick=(event)=>{
    alert(event.eventPhase);//2,dom0级在处于目标阶段处理事件
};

btn.addEventListener("click",(event)=>{
   alert(event.eventPhase);//1 
},true);

btn.addEventListener("click",(event)=>{
       alert(event.eventPhase);//3
},false);

document.body.onclick=(event)=>{
  alert(event.eventPhase);//3  
}