JS中fireEvent方法

时间 2019-11-18

原文原文链接

转自：http://liuwei1578.blog.163.com/blog/static/4958036420082710309544/函数

在DHTML开发中，微软在其DOM中为每一个元素实现了一个fireEvent方法。咱们知道HTML的事件onXXX能够由系统(IE环境)来管理和触发，也能够直接执行事件的handler，好比onclick，若是被赋予事件处理函数，咱们能够用element.onclick()来执行事件处理函数。那么fireEvent用来干吗呢？this

在MSDN中fireEvent的描述很简单：Fires a specified event on the object.spa

bFired = object.fireEvent(sEvent [, oEventObject])blog

而且MSDN给出了一个使用fireEvent的示例：seo

<HTML>事件

<HEAD>ci

<SCRIPT>element

function fnFireEvents()开发

{it

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.

Mouse over this!

</DIV>

<BUTTON ID="btn" ONCLICK="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这种方式，示例以下：

<tr>

</tr>

</table>

abc</button>

def</button>

使用abc.onclick()和def.onclick()将获得"Object doesn't support this property or method"异常。

abc def

知道了fireEvent的用法，那么咱们用它来作什么呢？在开发具备复琐事件处理动做组件时。有时咱们须要从程序中去触发一个自己因该鼠标或键盘触发的事件，好比在TreeView控件中，咱们通常是使用鼠标点击来Expand&Collapse一个结点，若是咱们要用程序代码来实现这个操做怎么办呢？固然直接执行事件处理函数是能够的，不过若是事件处理函数依赖于event变量中的状态值，那么就必须使用fireEvent方法。

原来我曾经说过，因该把事件处理的函数封装起来，便于直接调用。好比上面说到的TreeView节点的Expand和Collapse，我在TreeView控件中都是把它们封装成两个函数Expand和Collapse，在节点被点击时，执行：

OpIcon.onclick = function()

{

var objNode = this.Object;

if ( objNode.m_IsExpanded )

objNode.Collapse();

else

objNode.Expaned();

}

这样一来，在程序中控制Expand和Collapse也就是分别执行函数而已。不事后来发现既然DOM中有fireEvent方法，彷佛我在"动态载入数据的无刷新TreeView控件(4)"中的某些想法也不是很必要了。