求js中fireEvent的用法 - Web 開發(fā) / JavaScript

moyqsky 2011-01-10

展開全文

在DHTML開發(fā)中，微軟在其DOM中為每個元素實現(xiàn)了一個fireEvent方法。我們知道HTML的事件onXXX可以由系統(tǒng)(IE環(huán)境)來管理和觸發(fā)，也可以直接執(zhí)行事件的handler，比如onclick，如果被賦予事件處理函數(shù)，我們可以用element.onclick()來執(zhí)行事件處理函數(shù)。那么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的用法。不過這個示例有一點誤導我們，從而讓我們不容易發(fā)現(xiàn)frieEvent更有價值的使用方法。由于button的onclick事件被賦予語句：this.innerText = 'I have been clicked!'，這里很容易誤導我們，fireEvent產(chǎn)生的是執(zhí)行了btn.onclick()的效果。嗯，確實是這個效果，但是意義卻完全不同， btn.onclick()只是一個函數(shù)調(diào)用，它的執(zhí)行必須依賴于用戶對其賦值，否則btn.onclick為null，是不能執(zhí)行 btn.onclick()的。而fireEvent('onclick')的效果，"等同于"鼠標在button元素上進行了點擊。

由于IE的事件處理是bubble up方式，fireEvent(sEvent)就顯得更加的有意義了，如果我們在一個table元素<table>中監(jiān)聽事件，比如 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的用法，那么我們用它來做什么呢？在開發(fā)具有復雜事件處理動作組件時。有時我們需要從程序中去觸發(fā)一個本身因該鼠標或鍵盤觸發(fā)的事件，比如在TreeView控件中，我們一般是使用鼠標點擊來Expand&Collapse一個結(jié)點，如果我們要用程序代碼來實現(xiàn)這個操作怎么辦呢？當然直接執(zhí)行事件處理函數(shù)是可以的，不過如果事件處理函數(shù)依賴于event變量中的狀態(tài)值，那么就必須使用fireEvent方法。

原來我曾經(jīng)說過，因該把事件處理的函數(shù)封裝起來，便于直接調(diào)用。比如上面說到的TreeView節(jié)點的Expand和Collapse，我在TreeView控件中都是把它們封裝成兩個函數(shù)Expand和Collapse，在節(jié)點被點擊時，執(zhí)行：
OpIcon.onclick = function()
{
var bjNode = this.Object;
if ( objNode.m_IsExpanded )
objNode.Collapse();
else
objNode.Expaned();
}

這樣一來，在程序中控制Expand和Collapse也就是分別執(zhí)行函數(shù)而已。不過后來發(fā)現(xiàn)既然DOM中有fireEvent方法，似乎我在"動態(tài)載入數(shù)據(jù)的無刷新TreeView控件(4)"中的某些想法也不是很必要了

轉(zhuǎn)帖，呵呵

精華推薦：JavaScript 拖拉縮放效果

rainsilence
(rainsilence)
等　級：

#3樓得分：0回復于：2010-04-30 09:57:12

HTML code

                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/html4/loose.dtd">
                        <html>
                        <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                        <title>Insert title here</title>
                        <script type="text/javascript">
                        function doClick() {
                        alert("click");
                        }
                        function fireEvent(e) {
                        var test = document.getElementById('test');
                        if (document.all) {
                        test.fireEvent('onclick');
                        } else {
                        var event = document.createEvent("HTMLEvents");
                        event.initEvent('click', true, true);
                        test.dispatchEvent(event);
                        }
                        }
                        </script>
                        </head>
                        <body>
                        <input id="test" type="button" value="Click" onclick="doClick();" />
                        <input type="button" value="Dispatch" onclick="fireEvent(event);"/>
                        </body>
                        </html>