JavaScript之IE的fireEvent方法詳細(xì)解析
在IE中提供了一個(gè)fireEvent方法,顧名思義就是觸發(fā)某個(gè)事件發(fā)生的意思。剛開(kāi)始我以為是會(huì)跟平時(shí)使用onclick()一樣,沒(méi)想到最近在寫javascript入門ppt的時(shí)候發(fā)現(xiàn)了,原來(lái)自己太自以為是了!看來(lái)還有很多javascript的細(xì)節(jié)沒(méi)有掌握好啊!
現(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>
這段代碼中我們沒(méi)有個(gè)id1的li添加onclick事件,點(diǎn)擊button,會(huì)報(bào)錯(cuò),提示“對(duì)象不支持此屬性或方法”。由此可見(jiàn),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沒(méi)有觸發(fā),這就表明了DOM.onclick()不存在冒泡。
fireEvent()
我們來(lái)看看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事件,說(shuō)明fireEvent會(huì)引起冒泡,而且沒(méi)有發(fā)生像onclick()提示“對(duì)象不支持此屬性或方法”,說(shuō)明即使不添加id1的onclick事件也可以冒泡。
由此可以看出,IE中的fireEvent方法類似模擬用戶的鼠標(biāo)點(diǎn)擊行為,而不是單純的onclick。
總結(jié)fireEvent和onclick區(qū)別
通過(guò)上面的例子可以看出,DOM的fireEvent和onclick(這只是個(gè)代表)有以下區(qū)別:
onclick需要DOM真正添加了onclick事件,否則會(huì)報(bào)“對(duì)象不支持此屬性或方法”錯(cuò)誤
onclick不會(huì)引起IE的冒泡過(guò)程,而fireEvent會(huì)引起冒泡,fireEvent更貼近用戶真實(shí)的行為觸發(fā)
由第二條得出,fireEvent在即使DOM沒(méi)有click事件也可以fireEvent,而不會(huì)報(bào)錯(cuò)(更貼近用戶真實(shí)行為)
最后可以拿下面的代碼測(cè)試:
<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)文章
直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來(lái)用的頁(yè)面跳轉(zhuǎn)進(jìn)度條,由javascript實(shí)現(xiàn),可以直接跳轉(zhuǎn)到相應(yīng)頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01Web前端框架bootstrap實(shí)戰(zhàn)【第一次接觸使用】
Bootstrap是Twitter推出的一個(gè)開(kāi)源的前端框架。這篇文章主要介紹了Web前端框架bootstrap實(shí)戰(zhàn),需要的朋友可以參考下2016-12-12JS co 函數(shù)庫(kù)的含義和用法實(shí)例總結(jié)
這篇文章主要介紹了JS co 函數(shù)庫(kù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS co 函數(shù)庫(kù)的基本含義、功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)一個(gè)Upload組件的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05CodeMirror實(shí)現(xiàn)代碼對(duì)比功能(插件react vue)
這篇文章主要介紹了CodeMirror實(shí)現(xiàn)代碼對(duì)比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Kotlin學(xué)習(xí)第一步 kotlin語(yǔ)法特性
Kotlin學(xué)習(xí)第一步,從kotlin語(yǔ)法特性開(kāi)始學(xué)習(xí),包括變量定義、函數(shù)擴(kuò)展、Parcelable序列化、編寫工具類等,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05