javascript中的綁定與解綁函數(shù)應(yīng)用示例
Mozilla中:
addEventListener的使用方式:
target.addEventListener(type, listener, useCapture);
target: 文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type: 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :實(shí)現(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é)點(diǎn)、document、window 或 XMLHttpRequest。
type: 字符串,事件名稱,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
W3C 及 IE 同時(shí)支持移除指定的事件, 用途是移除設(shè)定的事件, 格式分別如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
target.addEventListener(type, listener, useCapture);
target 文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type 字符串,事件名稱,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener 實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture 是否使用捕捉,看了后面的事件流一節(jié)后就明白了,一般用 false
事件觸發(fā)時(shí),會(huì)將一個(gè) Event 對(duì)象傳遞給事件處理程序,比如:
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
適應(yīng)的瀏覽器版本不同,同時(shí)在使用的過(guò)程中要注意
attachEvent方法 按鈕onclick IE中使用
addEventListener方法 按鈕click fox中使用
兩者使用的原理:可對(duì)執(zhí)行的優(yōu)先級(jí)不一樣,下面實(shí)例講解如下:
attachEvent方法,為某一事件附加其它的處理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
舉例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果這樣寫(xiě),那么將會(huì)只有medhot3被執(zhí)行
寫(xiě)成這樣:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);執(zhí)行順序?yàn)閙ethod3->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í)行順序?yàn)閙ethod1->method2->method3
實(shí)例:(要注意的是div必須放到j(luò)s前面才行)
- JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
- JS 事件綁定函數(shù)代碼
- js使用函數(shù)綁定技術(shù)改變事件處理程序的作用域
- JavaScript綁定事件監(jiān)聽(tīng)函數(shù)的通用方法
- 詳解JavaScript函數(shù)綁定
- JavaScript為事件句柄綁定監(jiān)聽(tīng)函數(shù)實(shí)例詳解
- 兼容瀏覽器的js事件綁定函數(shù)(詳解)
- 把多個(gè)JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法
- JavaScript函數(shù)中的this四種綁定形式
- JavaScript函數(shù)綁定用法實(shí)例分析
相關(guān)文章
JavaScript的9種繼承實(shí)現(xiàn)方式歸納
這篇文章主要介紹了JavaScript的9種繼承實(shí)現(xiàn)方式歸納,本文講解了原型鏈繼承、原型繼承(非原型鏈)、臨時(shí)構(gòu)造器繼承、屬性拷貝、對(duì)象間繼承等繼承方式,需要的朋友可以參考下2015-05-05JavaScript中的prototype使用說(shuō)明
在JavaScript中并沒(méi)有類(lèi)的概念,但JavaScript中的確可以實(shí)現(xiàn)重載,多態(tài),繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來(lái)解釋。2010-04-04hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
這篇文章主要為大家詳細(xì)介紹了hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08JavaScript 對(duì)Cookie 操作的封裝小結(jié)
通過(guò)本篇,您能了解到: 匿名函數(shù) 閉包的產(chǎn)生 JavaScript實(shí)現(xiàn)private 以及 public 訪問(wèn)權(quán)限 document.cookie 的操作2009-12-12動(dòng)態(tài)調(diào)整textarea中字體的大小代碼
用js批量輸出select事件控制textarea中字體的大小的代碼。2009-12-12