1...在DHTML开发中,微软在其DOM中为每个元素实现了一个fireEvent方法。我们知道HTML的事件onXXX可以由系统(IE环境)来管理和触发,也可以直接执行事件的handler,比如onclick,如果被赋予事件处理函数,我们可以用element.onclick()来执行事件处理函数。那么fireEvent用来干嘛呢?
在MSDN中fireEvent的描述很简单:Fires a specified event on the object.
bFired = object.fireEvent(sEvent [, oEventObject])
并且MSDN给出了一个使用fireEvent的示例:
<HTML>
<HEAD>
<SCRIPT>
function fnFireEvents()
{
div.innerText = "The cursor has moved over me!";
btn.fireEvent("onclick");
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Using the fireEvent method</h1>
By moving the cursor over the DIV below, the button is clicked.
<DIV ID="div" nmouseover="fnFireEvents();">
Mouse over this!
</DIV>
<BUTTON ID="btn" NCLICK="this.innerText='I have been clicked!'">Button</BUTTON>
</BODY>
</HTML>
这个示例非常的简单,也完全说明了fireEvent的用法。不过这个示例有一点误导我们,从而让我们不容易发现frieEvent更有价值的使用方法。由于button的onclick事件被赋予语句:this.innerText = 'I have been clicked!',这里很容易误导我们,fireEvent产生的是执行了btn.onclick()的效果。嗯,确实是这个效果,但是意义却完全不同, btn.onclick()只是一个函数调用,它的执行必须依赖于用户对其赋值,否则btn.onclick为null,是不能执行 btn.onclick()的。而fireEvent('onclick')的效果,"等同于"鼠标在button元素上进行了点击。
由于IE的事件处理是bubble up方式,fireEvent(sEvent)就显得更加的有意义了,如果我们在一个table元素<table>中监听事件,比如 onclick,当点击不同的td做出不同的响应时。如果使用程序来模拟,只能使用fireEvent这种方式,示例如下:
<table border="1" nclick="alert(event.srcElement.innerText);">
<tr>
<td id="abc">abc</td>
<td id="def">def</td>
</tr>
</table>
<button nclick="abc.fireEvent('onclick')">
abc</button>
<button nclick="def.fireEvent('onclick')">
def</button>
使用abc.onclick()和def.onclick()将得到"Object doesn't support this property or method"异常。
abc def
abc def
知道了fireEvent的用法,那么我们用它来做什么呢?在开发具有复杂事件处理动作组件时。有时我们需要从程序中去触发一个本身因该鼠标或键盘触发的事件,比如在TreeView控件中,我们一般是使用鼠标点击来Expand&Collapse一个结点,如果我们要用程序代码来实现这个操作怎么办呢?当然直接执行事件处理函数是可以的,不过如果事件处理函数依赖于event变量中的状态值,那么就必须使用fireEvent方法。
原来我曾经说过,因该把事件处理的函数封装起来,便于直接调用。比如上面说到的TreeView节点的Expand和Collapse,我在TreeView控件中都是把它们封装成两个函数Expand和Collapse,在节点被点击时,执行:
OpIcon.onclick = function()
{
var bjNode = this.Object;
if ( objNode.m_IsExpanded )
objNode.Collapse();
else
objNode.Expaned();
}
这样一来,在程序中控制Expand和Collapse也就是分别执行函数而已。不过后来发现既然DOM中有fireEvent方法,似乎我在"动态载入数据的无刷新TreeView控件(4)"中的某些想法也不是很必要了。
2...
1.fireEvent()是强迫触发某个事件。
如:<form οnsubmit="a()">。。。
中,如果button的form.submit()的方式提交表单,是不会主动触发onsumbit事件的,如果必须的话,就要在submit前fireEvent("onsubmit")下,这样就会触发该事件了。
attachEvent()是绑定函数到某个事件上(detachEvent是卸载)。
如:<button id=btn>
<script>
var f =new Function("event","alert('i am attached function')");
btn.attachEvent("onclick",f);
</script>
下面为fireFox中方法,firefox不支持fireEvent
if( document.all )
{
t.fireEvent( "onchange" );
}
else
{
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change',true,true);
t.dispatchEvent(evt);
}
页面中不能同时出现window.οnlοad=...和<body οnlοad="...">
解决办法就是用attachEvent给onload添加所需运行的函数
if (document.all){
window.attachEvent('onload',FuncName)
}
else{
window.addEventListener('load',FuncName,false);
}[最后编
实例区别:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function a()
{
var newEvt = document.createEventObject()
newEvt.button = 3
document.all.aa.fireEvent("onkeydown", newEvt)
//document.all.aa.click()
}
function b()
{
document.all.bb.οnkeypress=c
}
function c()
{
alert()
}
//-->
</SCRIPT>
</HEAD>
<BODY οnlοad="a();b()">
<INPUT TYPE="text" id="aa" οnkeydοwn="alert()">
<INPUT TYPE="text" id="bb"><br>
</BODY>
</HTML>