淺談addEventListener和attachEvent的區(qū)別
• addEventListener共有3個(gè)參數(shù),如下所示:
element.addEventListener(type,listener,useCapture);
參數(shù) | 參數(shù)說(shuō)明 |
---|---|
element | 要綁定事件的對(duì)象,及HTML節(jié)點(diǎn)。 |
type | 事件名稱,注意去掉事件前邊的“on”,比如“onclick”要寫成“click”,“onmouseover”要寫成“mouseover”。 |
listener | 要綁定的事件監(jiān)聽函數(shù),注意只寫函數(shù)名,不要帶括號(hào)。 |
userCapture | 事件監(jiān)聽方式,只能是true和false:true,采用capture(捕獲)模式;false,采用bubbling(冒泡)模式。如無(wú)特殊要求,一般是false。 |
這里有必要說(shuō)一下捕獲模式和冒泡模式的區(qū)別。
如圖所示,有兩層div元素,而且都設(shè)定有click事件,一般來(lái)說(shuō),如果我在內(nèi)層藍(lán)色的元素上click不只會(huì)觸發(fā)藍(lán)色元素的click事件,還會(huì)同時(shí)觸發(fā)紅色元素的click事件,而useCapture這個(gè)參數(shù)就是在控制這時(shí)候兩個(gè)click事件的先后順序。如果是false,那就會(huì)使用bubbling(冒泡)模式,他是從內(nèi)而外的流程,所以會(huì)先執(zhí)行藍(lán)色元素的click事件再執(zhí)行紅色元素的click事件,如果是true,那就是capture(捕獲)模式,和bubbling(冒泡)模式相反是由外而內(nèi),會(huì)先執(zhí)行紅色元素的click事件才執(zhí)行藍(lán)色元素的click事件。
如果不同層的元素使用的useCapture不同,會(huì)先從最外層元素往目標(biāo)元素尋找設(shè)定為capture(捕獲)模式的事件,到達(dá)目標(biāo)元素執(zhí)行目標(biāo)元素的事件后,再尋原路往外尋找設(shè)定為bubbling(冒泡)模式的事件。
•attachEvent共有2個(gè)參數(shù),如下所示:
element.attachEvent(type,listener);
參數(shù) | 參數(shù)說(shuō)明 |
---|---|
element | 要綁定事件的對(duì)象,及HTML節(jié)點(diǎn)。 |
type | 事件名稱,注意加上事件前邊的“on”,比如“onclick”和“onmouseover”,這是與addEventListener的區(qū)別。 |
listener | 要綁定的事件監(jiān)聽函數(shù),注意只寫函數(shù)名,不要帶括號(hào)。 |
addEventListener()是標(biāo)準(zhǔn)的綁定事件監(jiān)聽函數(shù)的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數(shù);但是,IE8.0及其以下版本不支持該方法,它使用attachEvent()來(lái)綁定事件監(jiān)聽函數(shù)。所以,這種綁定事件的方法必須要處理瀏覽器兼容問題。
兼容IE和非IE瀏覽器事件綁定的代碼:
function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期瀏覽器 obj['on' + type] = handle; } } }
或者
function regEvent(ele, event_name, fun) { if (window.attachEvent) ele.attachEvent(event_name, fun); //IE瀏覽器 else { event_name = event_name.replace(/^on/, “”); //如果on開頭,刪除on,如onclick->click ele.addEventListener(event_name, fun, false); //非IE瀏覽器 } }
以上這篇淺談addEventListener和attachEvent的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS使用ajax方法獲取指定url的head信息中指定字段值的方法
這篇文章主要介紹了JS使用ajax方法獲取指定url的head信息中指定字段值的方法,實(shí)例分析了Ajax操作URL中head信息的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Echarts橫向堆疊柱狀圖和markLine實(shí)例詳解
一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,所以應(yīng)該將柱形圖堆疊起來(lái),這樣就會(huì)好很多,下面這篇文章主要給大家介紹了關(guān)于Echarts橫向堆疊柱狀圖和markLine的相關(guān)資料,需要的朋友可以參考下2022-06-06詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫
本篇文章主要介紹了詳解JS去重及字符串奇數(shù)位小寫轉(zhuǎn)大寫 ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-12-12Jquery作者John Resig自己封裝的javascript 常用函數(shù)
Jquery作者John Resig自己封裝的常用函數(shù), 大家可以參考下。2009-11-11通過JavaScript實(shí)現(xiàn)動(dòng)態(tài)圣誕樹詳解
這篇文章主要為大家介紹幾個(gè)好看的基于HTML+CSS+JS的圣誕樹,希望圣誕節(jié)那天圣誕老爺爺能把我喜歡的你塞到我床上。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12js解析xml字符串和xml文檔實(shí)現(xiàn)原理及代碼(針對(duì)ie與火狐)
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml,其實(shí)原理是一樣的,只不過放在了ajax里,還是要對(duì)返回的xml進(jìn)行解析,感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)js解析xml有所幫助2013-02-02被jQuery折騰得半死,揭秘為何jQuery為何在IE/Firefox下均無(wú)法使用
某學(xué)員前日實(shí)施一個(gè)Web項(xiàng)目實(shí)施發(fā)生了悲劇,找到我求解決,把我也折騰個(gè)半死。2010-01-01微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11