javascript中的綁定與解綁函數(shù)應(yīng)用示例
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文檔節(jié)點、document、window 或 XMLHttpRequest。
type: 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.attachEvent(type, listener);
target: 文檔節(jié)點、document、window 或 XMLHttpRequest。
type: 字符串,事件名稱,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
W3C 及 IE 同時支持移除指定的事件, 用途是移除設(shè)定的事件, 格式分別如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
target.addEventListener(type, listener, useCapture);
target 文檔節(jié)點、document、window 或 XMLHttpRequest。
type 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 實現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture 是否使用捕捉,看了后面的事件流一節(jié)后就明白了,一般用 false
事件觸發(fā)時,會將一個 Event 對象傳遞給事件處理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應(yīng)的瀏覽器版本不同,同時在使用的過程中要注意
attachEvent方法 按鈕onclick IE中使用
addEventListener方法 按鈕click fox中使用
兩者使用的原理:可對執(zhí)行的優(yōu)先級不一樣,下面實例講解如下:
attachEvent方法,為某一事件附加其它的處理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
舉例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果這樣寫,那么將會只有medhot3被執(zhí)行
寫成這樣:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執(zhí)行順序為method3->method2->method1
如果是Mozilla系列,并不支持該方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);執(zhí)行順序為method1->method2->method3
實例:(要注意的是div必須放到j(luò)s前面才行)
相關(guān)文章
javascript+css實現(xiàn)單擊顏色褪去效果
javascript+css實現(xiàn)單擊顏色褪去效果...2007-08-08
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【六】對話框及提示框的處理和優(yōu)化
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【六】對話框及提示框的處理和優(yōu)化的相關(guān)知識,主要對比說明在Bootstrap開發(fā)中用到的這些技術(shù)要點,對此文感興趣的朋友一起學(xué)習(xí)吧2016-05-05
微信小程使用swiper組件實現(xiàn)圖片輪播切換顯示功能【附源碼下載】
這篇文章主要介紹了微信小程使用swiper組件實現(xiàn)圖片輪播切換顯示功能,涉及swiper組件相關(guān)屬性使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
基于javascript實現(xiàn)泡泡大冒險網(wǎng)頁版小游戲
這篇文章主要介紹了基于javascript實現(xiàn)泡泡大冒險網(wǎng)頁版小游戲,很有趣的游戲,可以練習(xí)打字速度,感興趣的小伙伴們可以參考一下2016-03-03
Bootstrap實現(xiàn)省市區(qū)三級聯(lián)動(親測可用)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實現(xiàn)省市區(qū)三級聯(lián)動,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07
用javascript獲取當(dāng)頁面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當(dāng)頁面上鼠標(biāo)(光標(biāo))位置 和 觸發(fā)事件的對象 的方法2009-12-12

