Q&A
引数の使い方、準備の仕方、構造（何が入っているものかなど）を具体的に追記いただけませんか？
前回の投稿の続きです。
追加した要素にすでにあるイベントの処理を再設定したい
前回の投稿で追加した要素に対して、イベントハンドラを再登録する方法を学べました。
個人的に関数を宣言しておき、それをonイベントで再登録する方法が一番シンプルでいいなと思ったのですが。
引数がある場合はどのような書き方になるのでしょうか？
例えばこのような場合です。
javascript
1function handleClick (_this) { 2 console.log(_this.val()); 3}
このような書き方でいけるかと試したのですが、handleClick is not defined のようなエラーが出て実行できませんでした。
javascript
1 2 3// #testBtn をDOMツリーに挿入する 4 5jQuery('#testBtn').on('click', handleClick(this)); 6
書き方が間違っているでしょうか？
それとも書き方はあっているけど他の理由でエラーが出ているのでしょうか？
もしわかる方がいらっしゃったら教えていいただければと思います。
追記
一例ですが、今回のパターンで言うと
<input type="file">を使って画像を表示したいのときです。
以下サイトの $('.fileInput').change(function(){の中を関数にしたいのです。
FileAPIを使った画像表示
というのも<input type="file">の値を消すのにIEの古いバージョンだと一度このコードを消してしまって
もう一度生成しなければいけないからです。
アップロード時に選択したファイルをクリア
そのとき再度changeイベントを登録するのに、いちいちこの長ったらしいコードを書かずに済むように関数化しておきたいというところです。
javascript
1$('.fileInput').change(function(){ 2 displayImage(this); 3} 4 5 6 7function displayImage(_this) { 8 // 1. 選択されたファイルがない場合は何もせずにreturn 9 if (!_this.files.length) { 10 return; 11 } 12 13 var file = _this.files[0], // 2. files配列にファイルが入っています 14 $_img = $(_this).siblings('img'), // 3. jQueryのsiblingsメソッドで兄弟のimgを取得 15 fileReader = new FileReader(); // 4. ファイルを読み込むFileReaderオブジェクト 16 17 // 5. 読み込みが完了した際のイベントハンドラ。imgのsrcにデータをセット 18 fileReader.onload = function(event) { 19 // 読み込んだデータをimgに設定 20 $_img.attr('src', event.target.result); 21 }; 22 23 // 6. 画像読み込み 24 fileReader.readAsDataURL(file); 25} 26 27 28// displayImage(this)を再登録したい
回答3件
0
ベストアンサー
イベントハンドラー登録を
jQuery('#testBtn').on('click', handleClick);
ハンドラーを
function handleClick() {
console.log($(this).val());
?
に修正すると動くのでは。
this は引数として渡す必要はありません。this に関する説明はこちらのサイトでの説明が解りやすいでしょうか。
ご参考になれば。
投稿2016/04/25 14:57
編集2016/04/25 15:09
総合スコア2425
回答有り難うございます。
それって引数thisは受け取れているのでしょうか？
あ、そうですね。ハンドラー側も少し修正が必要ですね。回答を修正します。
返答ありがとうございます。
今回のthisの扱い方に関してはあくまで例で、実際引数にthisを渡さないといけないケースがよく出てくるんです。
なので引数にthisを与えたまま、再登録する際も呼べるようにしたいのです。
そのようにする方法はないのでしょうか？
ハンドラー関数の引数はjQuery.Eventオブジェクトと決まっていて変更できません。ただし、このイベントオブジェクト内にはクリックイベントの発生元エレメントなどの情報（event.targetプロパティ）が含まれているので、thisを使わなくてもイベント発生元を知ることは可能です。
また、このイベントオブジェクトをプログラムコードで明示的に作成し、任意のDOMエレメントに対してイベント発行する事は可能なので、thisの引き渡しの問題を解決できるかもしれません。
thisを引数として渡す必要が出てしまうケースというのがちょっと想像できないのですが、具体的に一つ例を挙げることは可能でしょうか？
「追記」していただいた <input type='file'> を作り直すケースについて。
jQuery on() や click()、change() 等によるイベントハンドラ登録機能は動的に作成されたDOM要素にイベントハンドラを登録することができません。
このため、clickやmouseoverなどのマウスイベントでは、イベント登録対象を静的に宣言された親要素（親DIVなど）とし、動的に作成された子要素にイベントをフォワードする機能が用意されています。
> $('#parent_div').on('click','.child-element',function() { /* this が子要素を参照した状態で呼び出される */});
ただ残念ながらこの方法は動的に作成される子要素にフォワードしたいイベント種別が 'change' の場合には使えません（親要素であるDIVが 'change' イベントを登録できないため）
この場合、jQuery を利用せず、素のHTML DOMを使う必要があります。例えば・・・
var f = document.createElement('input');
f.setAttribute('type', 'file');
f.addEventListener('change', displayImage);
document.body.appendChild(f);
このようなコードになると思われます。
ご参考になれば。
回答ありがとうございます。
具体的なコードをあげてくださり、感謝いたします。
jQueryでは厳しいということでJavaScriptのやり方を教えていただきましたが、
これは引数thisを含んでいるのでしょうか？
thisではなく、event.targetプロパティを使うのですね
0
イベントハンドラ関数にオブジェクトを渡す方法はいくつかありますが、jQuery を使用しているなら event.data を使うのが良いと思います。
Re: k499778 さん
投稿2016/04/27 13:45
総合スコア18164
回答ありがとうございます。
返答が遅くなっていることをお詫びします。
内容がみなさん深く濃いのでその理解と派生した勉強に時間がかかっているため
このような結果になっています。
皆さん回答を一度自分の中で落とし込み、もう一度勉強しなおしてまたわからないことがあれば質問したいと思います。
ありがとうございました。
0
javascript
1jQuery('#testBtn').on('click', handleClick(this));
とありますが、handleClick は関数オブジェクトですが、handleClick(this) は「handleClick という関数に this を実引数として渡して実行」した結果のもの、になります。
イベントハンドラとして（より一般的にはコールバック関数として）渡すのは関数オブジェクトでなければなりません。
また、コールバックとして登録する関数の「型」すなわち、どのような引数をとるか、は、コールバックを呼び出す側が規定しています。jQuery.on() の場合、コールバック関数は第一引数に eventObject を渡して実行されます。
次のリファレンスなどを参照してください。
.on() - Js STUDIO
投稿2016/04/25 17:03
総合スコア2468
回答ありがとうございます。
今回の場合、関数オブジェクトではなく、実行した結果のものが渡されているため、
うまく動作しないとわかりました。
ではこのようなパターンの場合、どのようにしてonイベントの引数に渡してあげればいいかを知るため、提示してくださったリファレンスも見たのですが、やはりやり方がわかりません。
引数this,あるいはthisでなくとも引数がある関数をonで扱うのはどうするのでしょうか？
できないのでしょうか？再度関数定義していた処理の内容を全文書かないといけないのでしょうか？
もしお時間ございましたら教えて頂けると大変ありがたいです。
k49978 さんが、自分で、コールバック関数を引数に取るような関数を定義するとしましょう。
たとえば、setup() というメソッドにある整数とコールバック関数を与えてセットアップしたうえで exec() というメソッドを呼ぶと、1 から与えられた整数まで順に出力する、というオブジェクトを作るとします。ただし、3 の倍数と 3 がつく整数のときには、そのまま出力するのではなく、登録されているコールバック関数にその整数を渡して戻ってきた値を出力する、とします。
具体的なコードは次のようになります。
var three = {
setup: function(limit, func) {
this.limit = limit;
this.func = func;
return this;
},
exec: function() {
for (var i = 1; i <= this.limit; i++) {
console.log( (i % 3 == 0 || ('x' + i).indexOf('3') > 0) ?
this.func(i) : i );
}
return this;
}
};
使い方は、
three.setup(15, function(i) { return '[' + i + ']'; }).exec();
のようになります。
で、k499778 さんがこの setup() 関数に指定するコールバック関数の仕様を説明する立場だったら、どのように説明するか、ということを考えてみてください。
「コールバック関数は、第一引数に整数をとり、文字列を返す関数にしてください」というような説明になるかと思います。自分で作った exec() 関数の中でコールバック関数に何を引数に呼び出し、その戻り値をどのように使うかは決まっているわけですから、ユーザが自由に引数を指定したりできない、ということがおわかりいただけるでしょうか。
jQuery の .on() のリファレンスを読むときにも、そういう観点から読むといいと思います。
とか書きましたが、k499778 さんがイベントハンドラに渡したいと思っている this、すなわち、イベントが発生した DOM 要素は、明示的にイベントハンドラに渡す必要はありません。イベントハンドラ内の this がイベントの発生した DOM 要素にバインドされてイベントハンドラが起動されるからです。
tkanda さんが回答されているのはそういうことです。this を渡さなくても、イベントハンドラ内の this がその DOM 要素になっている、ということです。
あと、これは余談になりますが、同じような動作をする関数を複数回、コールバック関数として登録したい、というような場合、関数を返す関数を作ることで、「再度関数定義していた処理の内容を全文書かな」くても済むようになります。が、完全に余談です。今回は使う必要はまったくありません。まったくありませんが、例だけ示しておきます。
function mkfunc(face) {
return function(i) {
return face + (function(n, i, r) {
for (; i < n; i++) { r += '-'; }
return r + '○';
})(i, 0, '') + ' !!!';
};
}
three
.setup(10, mkfunc('(T_T)'))
.exec()
.setup(40, mkfunc('(・д・)'))
.exec();
回答ありがとうございます。
返答が遅くなっていることをお詫びします。
内容がみなさん深く濃いのでその理解と派生した勉強に時間がかかっているため
このような結果になっています。
皆さん回答を一度自分の中で落とし込み、もう一度勉強しなおしてまたわからないことがあれば質問したいと思います。
ありがとうございました。
あなたの回答
tips
プレビュー
