給事件響應函數(shù)傳參數(shù)的四種方式小結(jié)
更新時間：2013年12月05日 09:27:35 作者：
這篇文章主要介紹了給事件響應函數(shù)傳參數(shù)的四種方式。需要的朋友可以過來參考下，希望對大家有所幫助
如何給事件handler傳參數(shù)？在剛剛接觸Javascript的時候，由于對閉包理解不深刻，常常糾結(jié)于該問題。
在討論群里也經(jīng)常碰到這樣的問題，如下
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>如何給事件handler傳參數(shù)？</title>
</head>
<body>
<a href="#" id="aa">Click me</a>
<script type="text/javascript">
var E = {
on : function(el, type, fn){
el.addEventListener ?
el.addEventListener(type, fn, false) :
el.attachEvent("on" + type, fn);
},
un : function(el,type,fn){
el.removeEventListener ?
el.removeEventListener(type, fn, false) :
el.detachEvent("on" + type, fn);
}
};
var v1 = 'jack', v2 = 'lily';
function handler(arg1,arg2){
alert(arg1);
alert(arg2);
}
// 如何把參數(shù)v1，v2傳給handler？
// 默認事件對象將作為handler的第一個參數(shù)傳入，
// 這時點擊鏈接第一個彈出的是事件對象，第二個是undefined。
E.on(document.getElementById('aa'),'click',handler);
</script>
</body>
</html>
如何把參數(shù)v1，v2傳給handler？默認事件對象將作為handler的第一個參數(shù)傳入，這時點擊鏈接第一個彈出的是事件對象，第二個是undefined。
方案一 ，未保留事件對象作為第一個參數(shù)傳入
復制代碼 代碼如下:
function handler(arg1,arg2){
alert(arg1);
alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(){
handler(arg1,arg2);
});
方案二，保留事件對象作為第一個參數(shù)
復制代碼 代碼如下:
function handler(e,arg1,arg2){
alert(e);
alert(arg1);
alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(e){
handler(e,arg1,arg2);
});
方案三，給Function.prototype添加getCallback，不保留事件對象
復制代碼 代碼如下:
Function.prototype.getCallback = function(){
var _this = this, args = arguments;
return function(e) {
return _this.apply(this || window, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
方案四，給Function.prototype添加getCallback，保留事件對象作為第一個參數(shù)傳入
復制代碼 代碼如下:
Function.prototype.getCallback = function(){
var _this = this, args = [];
for(var i=0,l=arguments.length;i<l;i++){
args[i+1] = arguments[i];
}
return function(e) {
args[0] = e;
return _this.apply(this || window, args);
};
}
E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));
相關(guān)文章
這篇文章主要介紹了javascript實現(xiàn)的固定位置懸浮窗口,以一個完整實例形式詳細分析了javascript實現(xiàn)固定位置懸浮窗口的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
javascript二維數(shù)組轉(zhuǎn)置實例
這篇文章主要介紹了javascript二維數(shù)組轉(zhuǎn)置方法,實例分析了數(shù)組行列交換的轉(zhuǎn)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
JavaScript setTimeout和setInterval的使用方法 說明
兩個函數(shù)都是可以用來實現(xiàn)一段時間后執(zhí)行一段javascript代碼的效果。兩個函數(shù)都有兩個參數(shù)，前面的都是執(zhí)行表達式，后面的是隔的秒數(shù)。2010-03-03
本文為大家介紹下使用js如何實現(xiàn)動態(tài)改變字體大小，感興趣的額朋友不要錯過2014-01-01
Echarts,作為一個使用廣泛的JavaScript圖表庫,提供了創(chuàng)建動態(tài)排序折線圖的強大功能,下面就跟隨小編一起學習一下如何使用Echarts繪制動態(tài)排序折線圖吧2023-12-12
基于JS實現(xiàn)移動端向左滑動出現(xiàn)刪除按鈕功能
最近在做移動端項目時，需要實現(xiàn)一個列表頁面的每一項item向左滑動時出現(xiàn)相應的刪除按鈕，其實實現(xiàn)此功能很簡單的。這篇文章主要介紹了基于js實現(xiàn)移動端向左滑動出現(xiàn)刪除按鈕,需要的朋友可以參考下2017-02-02
這篇文章主要來和大家分享一下15個用于開發(fā)的TypeScript高級技巧，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-07-07
簡單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
如何寫一個通用的JavaScript效果庫！(2/2)...2007-04-04