JavaScriptの登録クリックイベントにおけるパラメータの受け渡しが失敗する問題について-jsチュートリアル-php.cn

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

高洛峰

リリース： 2017-02-16 17:19:52

オリジナル

964 人が閲覧しました

例えば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(&#39;click&#39;, fun, false); 
node.attachevent(&#39;onclick&#39;, fun);
Node[&#39;onclick&#39;]=fun

ログイン後にコピー

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

node.addEventListener(&#39;click&#39;, fun(arg1,arg2,arg3), false); 
node.attachevent(&#39;onclick&#39;, fun(arg1,arg2,arg3)); 
Node[&#39;onclick&#39;]=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 に注意してください。中国語のサイトです！