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)"中的某些想法也不是很必要了。