15.3.4 转发事件
DOM提供了dispatchEvent方法用于事件的转发,该方法属于Node对象,因此DOM的每个Node元素都可调用该方法,从而将事件直接
转发到本节点。该方法的语法格式如下:
target.dispatchEvent(Event event):将event事件转发到target上。
与Internet Explorer事件模型里的重定向事件不同的是,dispatch()方法必须转发人工合成事件(Synthetic Event),不能直接转发系统创建的事件。
DOM为创建人工合成事件提供了如下方法。
document.createEvent(String type):该方法创建一个事件对象,其中type参数用于指定事件类型,普通事件可使用Events,UI事件可使用
UIEvents,鼠标事件可使用MouseEvents。
通过上面的方法得到一个事件后,可调用事件的如下方法来初始化。
initEvent(String eventTypeArg,boolean canBubbleArg,boolean cancelableArg):用于初始化一个普通事件,第一个参数用于指定该事件
类型,如click等;等二个参数用于指定该事件是否支持冒泡;第三个参数用于指定该事件是否有默认行为,且可通过preventDefault()方法取消
该默认行为。
initUIEvent(String typeArg,boolean canBubbleArg,boolean cancelableArg,Window viewArg,long detailArg):该方法的前3个参数
的意义与上一个方法中的3个参数完全相同。后两个参数的意义与介绍UIEvent时的view、detail两个属性相同。
转发事件代码示范:
//脚本代码
//第一个按钮被单击时的事件处理函数
var rd = function(evt)
{
document.getElementById("show").innerHTML+="事件冒泡阶段:"+evt.currentTarget.value+"被单击了<br/>";
//创建一个普通事件
var e = document.createEvent("Events");
//初始化事件对象,指定该事件支持冒泡,不允许取消默认行为
e.initEvent("click",true,false);
//将事件转发到按钮bn2
document.getElementById("bn2").dispatchEvent(e);
}
//第二个按钮被单击时的事件处理函数
var gotClick = function(evt)
{
document.getElementById("show").innerHTML+="事件冒泡阶段:"+evt.currentTarget.value+"被单击了<br/>";
}
//分别为两个按钮绑定事件处理函数
document.getElementById("bn1").addEventListener("click",rd,false);
document.getElementById("bn2").addEventListener("click",gotClick,false);
//html代码
<input id="bn1" type="button" value="按钮1"/>
<input id="bn2" type="button" value="按钮2"/>
15.3.5 取消事件的默认行为
DOM也提供了取消事件默认行为的方法,DOM中的事件对象都提供了preventDefault()方法,该方法不需要参数,只要执行了给定事件的
preventDefault方法,该事件的默认行为就将失效。
代码示范:
<a id="mylink" href=www.baidu.com>导航</a>
var killClicks = function(event)
{
//取消事件的默认行为
event.perventDefault();
alert("超链接被单击,但已取消默认的导航跳转效果");
}
//为超链接绑定事件处理函数(捕获阶段)
document.getElementById("mylink").addEventListener("click",killClicks,true);
//点击导航链接后页面将弹出“超链接呗单击,但已取消默认的导航跳转效果”对话框,且不会跳转到baidu.com链接,因为perventDefault方法已经
取消了该事件的默认行为,但是该方法后面的脚本代码依然会执行。
8月18号=》431页-435页,布布扣,bubuko.com