ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの登録クリックイベントにおけるパラメータの受け渡しが失敗する問題について

JavaScriptの登録クリックイベントにおけるパラメータの受け渡しが失敗する問題について

高洛峰
高洛峰オリジナル
2017-02-16 17:19:52904ブラウズ

例えばJavaScriptでHTML要素のクリックイベントハンドラー関数を登録する場合、ハンドラー関数に3つのパラメータを渡します。ただし、次のメソッドを使用しても、イベント処理関数にパラメーターを渡すことはできません

過去 6 か月間 Java プログラマーとして、私は Java コードよりも多くの JavaScript コードを作成しました。少し前には窓口係として働いていました。システムの窓口権限制御では、窓口権限は、組織権限、窓口権限、役職権限、業務権限などのさまざまな要素を考慮する必要があり、これらの権限は複数回交差またはマージする必要があります。 . 設定処理では、ページを制御するために多くの JavaScript を使用する必要があります。その結果、JavaScript コードが Java コードよりもこの機能モジュールの実装に責任を持つ状況が生じました。

今度は、C/S アーキテクチャと同じくらい直感的で便利な管理機能を実現するために、銀行向けの貸金庫管理システムを開発する必要があります。 、処理結果はリアルタイムに処理されます、数日間考えて実験した結果、最終的にはCSS+javaScript+javaで開発し、ビジネスロジックをJavaで処理し、対象オブジェクトのさまざまな状態をCSSで表現して、対象オブジェクトのプロパティに応じてJavaScriptを開発し、CSSの切り替えを実現します。

ここで問題が発生しました。つまり、JavaScript で HTML 要素のクリック イベント ハンドラー関数を登録するとき、たとえば、ハンドラー関数に 3 つのパラメーターを渡すときです。ただし、次のメソッドが使用されても (node はイベントを登録するノードを表し、fun はイベント処理関数です)、パラメーターをイベント処理関数に渡すことはできません:

node.addEventListener('click', fun, false); 
node.attachevent('onclick', fun);
Node['onclick']=fun

明らかに、どちらのメソッドも書き方は同じなので注意してください。 誤:

node.addEventListener('click', fun(arg1,arg2,arg3), false); 
node.attachevent('onclick', fun(arg1,arg2,arg3)); 
Node['onclick']=fun(arg1,arg2,arg3)

幸いなことに、「JavaScript.DOM Advanced Programming」という本を読んで、この本で解決策を見つけました。まずメソッドを作成します:

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) { 
args.push(arguments[i]);
} 
return function(){ 
func.apply(obj, args);
}; 
};

次に、次の 2 つのメソッドを独自の js ライブラリに追加します。何も理解できない場合は、セクション 2.3 で説明されている「JavaScript.DOM の高度なプログラミング」を参照してください。この本のメソッドの説明は、私がいくつかの変更を加えたものです:

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function(){
func.apply(obj, args);
};
}; 
window[&#39;OYF_MARK&#39;][&#39;bindFunction&#39;] = bindFunction; 
function addEvent(node, type, listener){
//使用前面的方法检查兼容性以保证平稳退化
if (!isCompatible()) {
return false
} 
if (!(node = $(node))) 
return false;
if (node.addEventListener) { 
//W3C的方法(冒泡事件,如果将false改为true,则为捕获事件) 
node.addEventListener(type, listener, false); 
return true;
}
else
if (node.attachEvent) { 
//MSIE的方法 
node[&#39;e&#39; + type + listener] = listener;
node[type + listener] = function(){
node[&#39;e&#39; + type + listener](window.event);
} 
node.attachEvent(&#39;on&#39; + type, node[type + listener]); 
return true; 
}
//若两种方法都不具备则返回false 
return false;
};
window[&#39;OYF_MARK&#39;][&#39;addEvent&#39;] = addEvent;

上記の 2 つの関数は、「JavaScript.DOM Advanced Programming」のソース コードに基づいて私が少し変更し、1 つに追加しました。私自身の JS ライブラリを再利用します。次に、次のメソッドを使用して要素のイベントを登録し、イベント処理関数にパラメーターを渡すことができます:

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,&#39;click&#39;,OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));

JavaScript 登録クリック イベントでパラメーターを渡す際に失敗する問題に関するその他の関連記事については、PHP に注意してください。中国語のサイトです!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。