当前位置：首页 > news >正文

事件对象

news 2025/6/6 9:56:21

事件主要有四种：HTML5、DOM0、DOM2 和 IE方法，在上篇已经叙述到。而对于事件对象来说主要分为两部分来分析，即DOM级事件对象和IE的事件对象。
在说事件对象时首先要了解什么是事件对象。
在触发DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件类型以及与其他特定事件相关的信息。例如，鼠标操作导致的事件中，会包含鼠标的位置信息，而键盘操作导致的事件对象中，会包含与按下键有关的信息。所有浏览器都支持event对象，但支持方式不同，所以就要分两部分来讨论。
1、DOM中的事件对象：
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件用什么方法（DOM0级或者DOM2级），都会传入event对象。

var btn = doucument.getElementById("myBtn");btn.onclick = function(**event**){alert(event.type);       //"click"
}btn.addEventListener("click",  function(event)){alert(event.type);    //"click"
},false);

  以上分别是DOM0级和DOM2级事件处理程序，当点击按钮时，都会弹出一个警告框显示由event.type显示的事件类型，在这里为click。

通过HTML5特性定义的事件处理程序，变量event中也保存着event对象。

   <input type = "button" value = "Click me " onclick = alert(event.type)" />

event对象包含创建它特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

属性/方法               类型               说明
bubbles             Boolean       表明事件是否冒泡
cancelable          Boolean       表明是否可以取消事件的默认行为
currenTarget        Element       其当前事件处理程序正在处理事件的哪个                           元素defaultPrevented    Boolean       true表示已经调用了preventDefault()
detail              Integer       与事件相关的细节信息
eventPhase          Integer       调用事件处理程序的阶段 1表示捕获阶段2表示目标阶段3表示冒泡阶段preventDefault()    Function      取消事件的默认行为。如果cancelable是true，则可以使用该方法stopImmediatePropagation()        取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用stopPropagation()   Function      取消事件的进一步捕获或冒泡，如果bubbles()为true，可使用target               Element      事件的目标
trusted              Boolean      为true表示事件是浏览器生成的，false表示事件通过JS创建的
type                 String       被触发事件的类型view                AbstractView  与事件关联的抽象视图，等同于发生事件的window对象。

以上的方法都是可读的。
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标，如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。
在需要一个函数处理多个事件时需要type属性。

var btn = document.getElementById("myBtn");var handler = function(event) {switch(event.type){case  "click" :// do somethingbreak;case  "mouseover" :// do somethingbreak;case  "mouseout" :// do somethingbreak;}
};
btn.onclick = handler;
btn.ommouseover = handler;
btn.onmouseout = handler;

要阻止特定事件的默认行为，可以使用preventDefault()方法。例如链接的默认行为就是在被单击时导航到特性指定的URL，要取消这一默认行为，那么通过连接的onclick事件处理程序取消。

var link = document.getElementById("myLink");
link.onclick = function(event){event.preventDefault();
};

注意只有cancelable为true时才可以使用该方法取消事件的默认行为；
另外stopPropagation()方法用于停止事件在DOM层次中的传播，即取消事件的进一步捕获或者冒泡。例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序。

var btn = document.getElementById("myBtn");btn.onclick = function(event){alert("Clicked");event.stopPropagation();
};document.body.onclick = function(event){alert("body Clicked");
}

在上面的程序中，如果不使用event.stopPropagation();方法，那么在点击了按钮之后事件会冒泡到document.body上，就相当于点击了按钮会出现两个弹出框。但如果使用了event.stopPropagation();在执行了btn上的事件后，就阻止了沿着DOM层冒泡，所以就不会触发注册在body上的事件。
只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序完成，event对象就会被销毁。
2、IE中的事件对象
IE的对象也会包含与创建它的事件相关的属性和方法

cancelBubble()
默认值为false，但将其设置为true就可以取消事件的冒泡（与DOM中的event.stopPropagation();方法的作用相同）但这个是可以写的

returnValue
默认为true，但将其设置为false就可以取消事件的默认行为。（与DOm中的preventDefault()方法的用法相同）但这个是可以写的

srcElement
事件的目标，与DOM中的target属性相同。

type
被触发事件的类型
因为事件处理作用域是根据指定它的方式来确定，不能认为this会始终等于事件目标，最好使用event.srcElement比较保险。
returnValue属性与DOM中的preventDefault()方法相同；将returnValue值设置为false就可以阻止事件的默认行为

var link = document.getElementById("myLink");
link.onclick = function(event){event.returnValue = false;
};

cancelBubble属性与DOM中的stopPropagation（）方法的作用相同，都是用来停止事件冒泡的(可以说停止事件向上一级传播)，由于IE不支持事件捕获，所以只能阻止事件冒泡，但stopPropagation可以同时取消事件捕获和事件冒泡

var btn = document.getElementById("myBtn");btn.onclick = function(event){alert("Clicked");window.event.cancelBubble = true;
};document.body.onclick = function(event){alert("body Clicked");
};

在通过onclick事件处理程序中将cancelBubble设置为true就可以阻止事件冒泡而触发的body中注册的事件处理程序。

查看全文

http://www.xdnf.cn/news/813493.html