給事件響應函數(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)文章
這篇文章主要為大家詳細介紹了小程序采集錄音并上傳到后臺，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
javascript顯示倒計時控制按鈕的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript顯示倒計時控制按鈕的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
接著（2）來講。筆記（2）已經(jīng)講了引用和函數(shù)重載，接下來講解作用域。2009-09-09
JavaScript中number轉(zhuǎn)換成string介紹
這篇文章主要介紹了JavaScript中number轉(zhuǎn)換成string介紹,本文講解了4個把number轉(zhuǎn)換成string的函數(shù),需要的朋友可以參考下2014-12-12
JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對字符串進行編碼,最好使用第三方庫,比如iconv-lite來實現(xiàn)2023-12-12
這篇文章主要介紹了淺談Javascript編程風格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
slice 可以用來獲取數(shù)組片段，它返回新數(shù)組，不會修改原數(shù)組。2010-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)可輸入可選擇的select下拉框，可及時匹配包含輸入的內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Java通過WebSocket實現(xiàn)異步導出解決思路
這篇文章主要介紹了通過WebSocket實現(xiàn)異步導出,本篇文章記錄大批量數(shù)據(jù)導出時間過長,導致接口請求超時問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了分享幾個JavaScript運算符的使用技巧，幫助大家更好的理解和學習使用JavaScript，感興趣的朋友可以了解下2021-04-04