Q&A
回答ありがとうございます。
その双方に関しては理解できます。
もう少し自分でも勉強したいと思います。ありがとうございました！
現在HTML,Javascript（jQuery）を使ってアプリを作っています。
前回の投稿でアドバイスを頂き、自分なりに再登録の方法を模索しました。
追加した要素にすでにあるイベントハンドラを再登録したい2
結果以下のような形でやりたいことは実現できました。thisではなく、jQuery.Eventオブジェクトを使って。
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>event.data demo</title> 6 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 7</head> 8<body> 9<span id="userfile_item"> 10 <input type="file"> 11</span> 12<button>クリア</button> 13<script> 14//ファイルアップロード時 15$('input').on('change',function(ev){ 16 log(ev); 17}); 18 19//ログを出力する関数 20function log(ev){ 21 console.log(ev.target.value); 22} 23 24//クリアボタン押下時 25$('button').on('click',function(){ 26 //IE10以前用にinputタグを再生成する 27 $('#userfile_item').html('<input type="file" name="userfile">'); 28 //イベントハンドラを再登録する 29 $('input').on('change',log); 30}); 31</script> 32</body> 33</html> 34
ただなぜうまくいっているかわからないので教えていただきたいです。
わからないのは、「ev」についてです。
ファイルアップロード時は、
$('input').on('change',function(ev){の「ev」がlog関数への引数として渡され、ログを出力しました。
しかしイベントハンドラ再登録時は、
$('input').on('change',log)で、log関数の引数は設定されておらず、log関数では、log関数のイベントオブジェクトとして「ev」が働いています。
またlog関数が独立的に動くならと,$('input').on('change',function(ev)内のlog関数の引数を取り除き
log();
としたのですが、こうするとevがundifinedとなり、うまく動きませんでした。
このように
$('input').on('change',function(ev)のときは,evが引数として渡され、
$('input').on('change',log);のときは引数として渡してなくとも,log関数内でevを使えている違いは何なのか
を教えていただきたいです。
回答2件
0
ベストアンサー
JavaScriptの無名関数が悪さというか、わかりにくさを出してしまっていますね、
まず、JavaScriptでは、関数の定義方法がいくつかありますが、今回はとりあえず２つ書きます。
こちらは、普通の関数。
JavaScript
1function log(ev){ console.log(ev.target.value); }
まったく同じ関数定義ですが、実は以下のようにも書けます、「無名関数」を「変数」に代入しています。
JavaScript
1var log = function(ev){ console.log(ev.target.value); }
これらを動作させるためには、いづれも、
JavaScript
1log(ev);
とするだけです。どちらも、まったく同じ動作をします。
これを踏まえて、先のコードを見ると(ちょっとわかりやすいよう？に書き換えました)、
JavaScript
1$('input').on('change', function(ev){console.log(ev.target.value);} );
このコードですが、実はevという変数云々という所では無く、$('input').on('change'の引数として、
JavaScript
1function(ev){console.log(ev.target.value);}
そのものを代入していると、見えてきませんでしょうか？ということは、先の「無名関数」に戻ると、
JavaScript
1var log = function(ev){console.log(ev.target.value);}
ですから、結果として、
JavaScript
1$('input').on('change',log);
と書けることとなります。
うーん、、、説明、難しいですが、何度も読み直していただければ、もしかしてご理解いただけるかも。
投稿2016/04/28 21:04
総合スコア1283
0
以前質問されていた 追加した要素にすでにあるイベントハンドラを再登録したい２ に私がした回答、およびそこにつけたコメントをご理解いただければ、この質問についても自己解決できるはずです。
と、突き放すだけもアレなので、ちょっとだけヒントを。
javascript
1var log2 = function (ev) { 2 log(ev); 3}
としたとき、log(ev) と log2(ev) がほぼ同じ動きをすることはご理解いただけますか。
javascript
1function say(greeting) { 2 console.log(greeting); // (1) 3} 4``` のとき、`say(1.1)` と呼び出したら `(1)` のところで `greeting` が `1.1` になること、`say()` と呼び出したら `(1)` のところで `greeting` が `undefined` になることはご理解いただけますか。
投稿2016/04/28 17:24
総合スコア2468
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/29 05:20