IE的fireEvent方法概述及應(yīng)用
更新時(shí)間:2013年02月22日 15:59:36 作者:
IE中提供了一個(gè)fireEvent方法大概就是觸發(fā)某個(gè)事件發(fā)生的意思,以為是和onclick()一樣,看來是我自已為是了,有時(shí)間還要多看看javascript的細(xì)節(jié)啊,廣大網(wǎng)友也是啊
在IE中提供了一個(gè)fireEvent方法,顧名思義就是觸發(fā)某個(gè)事件發(fā)生的意思。剛開始我以為是會(huì)跟平時(shí)使用onclick()一樣,沒想到最近在寫javascript入門ppt的時(shí)候發(fā)現(xiàn)了,原來自己太自以為是了!看來還有很多javascript的細(xì)節(jié)沒有掌握好?。?br>
現(xiàn)在根據(jù)自己的總結(jié)詳細(xì)的記錄下fireEvent方法的使用。fireEvent是IE提供的一種方法,msdn文檔地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx
onclick()
我們先看第一段實(shí)例代碼:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
這段代碼中我們沒有個(gè)id1的li添加onclick事件,點(diǎn)擊button,會(huì)報(bào)錯(cuò),提示“對象不支持此屬性或方法”。由此可見,DOM.onclick()需要添加onclick事件之后才能使用。
假如我們把以上的代碼修改為:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1' onclick='alert(1);'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
此時(shí),點(diǎn)擊button會(huì)觸發(fā)onclick事件,但是ul的onclick沒有觸發(fā),這就表明了DOM.onclick()不存在冒泡。
fireEvent()
我們來看看fireEvent跟onclick()觸發(fā)事件是否相同??聪旅娴拇a:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>
點(diǎn)擊button后,觸發(fā)ul的onclick事件,說明fireEvent會(huì)引起冒泡,而且沒有發(fā)生像onclick()提示“對象不支持此屬性或方法”,說明即使不添加id1的onclick事件也可以冒泡。
由此可以看出,IE中的fireEvent方法類似模擬用戶的鼠標(biāo)點(diǎn)擊行為,而不是單純的onclick。
總結(jié)fireEvent和onclick區(qū)別
通過上面的例子可以看出,DOM的fireEvent和onclick(這只是個(gè)代表)有以下區(qū)別:
1.onclick需要DOM真正添加了onclick事件,否則會(huì)報(bào)“對象不支持此屬性或方法”錯(cuò)誤
2.onclick不會(huì)引起IE的冒泡過程,而fireEvent會(huì)引起冒泡,fireEvent更貼近用戶真實(shí)的行為觸發(fā)
3.由第二條得出,fireEvent在即使DOM沒有click事件也可以fireEvent,而不會(huì)報(bào)錯(cuò)(更貼近用戶真實(shí)行為)
最后可以拿下面的代碼測試:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1' onclick='alert(1);'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>
現(xiàn)在根據(jù)自己的總結(jié)詳細(xì)的記錄下fireEvent方法的使用。fireEvent是IE提供的一種方法,msdn文檔地址:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx
onclick()
我們先看第一段實(shí)例代碼:
復(fù)制代碼 代碼如下:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
這段代碼中我們沒有個(gè)id1的li添加onclick事件,點(diǎn)擊button,會(huì)報(bào)錯(cuò),提示“對象不支持此屬性或方法”。由此可見,DOM.onclick()需要添加onclick事件之后才能使用。
假如我們把以上的代碼修改為:
復(fù)制代碼 代碼如下:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1' onclick='alert(1);'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
此時(shí),點(diǎn)擊button會(huì)觸發(fā)onclick事件,但是ul的onclick沒有觸發(fā),這就表明了DOM.onclick()不存在冒泡。
fireEvent()
我們來看看fireEvent跟onclick()觸發(fā)事件是否相同??聪旅娴拇a:
復(fù)制代碼 代碼如下:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>
點(diǎn)擊button后,觸發(fā)ul的onclick事件,說明fireEvent會(huì)引起冒泡,而且沒有發(fā)生像onclick()提示“對象不支持此屬性或方法”,說明即使不添加id1的onclick事件也可以冒泡。
由此可以看出,IE中的fireEvent方法類似模擬用戶的鼠標(biāo)點(diǎn)擊行為,而不是單純的onclick。
總結(jié)fireEvent和onclick區(qū)別
通過上面的例子可以看出,DOM的fireEvent和onclick(這只是個(gè)代表)有以下區(qū)別:
1.onclick需要DOM真正添加了onclick事件,否則會(huì)報(bào)“對象不支持此屬性或方法”錯(cuò)誤
2.onclick不會(huì)引起IE的冒泡過程,而fireEvent會(huì)引起冒泡,fireEvent更貼近用戶真實(shí)的行為觸發(fā)
3.由第二條得出,fireEvent在即使DOM沒有click事件也可以fireEvent,而不會(huì)報(bào)錯(cuò)(更貼近用戶真實(shí)行為)
最后可以拿下面的代碼測試:
復(fù)制代碼 代碼如下:
<ul onclick='alert(event.srcElement.innerHTML);'>
<li id='id1' onclick='alert(1);'>i am one;</li>
<li id='id2'>i am two;</li>
<li id='id3'>i am three;</li>
</ul>
<button onclick='document.getElementById("id1").onclick();'>click me!</button>
<button onclick='document.getElementById("id1").fireEvent("onclick")'>fireEvent !</button>
您可能感興趣的文章:
相關(guān)文章
OpenLayer實(shí)現(xiàn)自定義坐標(biāo)點(diǎn)的繪制
OpenLayers?是一個(gè)專為Web?GIS?客戶端開發(fā)提供的JavaScript?類庫包,用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。本文將利用OpenLayer實(shí)現(xiàn)自定義坐標(biāo)點(diǎn)的繪制,感興趣的可以了解一下2022-04-04JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果
這篇文章主要為大家詳細(xì)介紹了JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法
給大家詳細(xì)分析了JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法并通過代碼實(shí)例分析了過程和原理,參考學(xué)習(xí)下吧。2017-12-12javascript實(shí)現(xiàn)框架高度隨內(nèi)容改變的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)框架高度隨內(nèi)容改變的方法,實(shí)例分析了通過父頁面及內(nèi)容改變框架高度兩種實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07