Q&A
>これだと関数側でボタンが参照できない
event.target とかありますが、それでも参照できませんか？
JavaScriptでのイベント内の引数の渡し方について
複数の部品からイベントを呼び出したい
var b=document.querySelector('button');
b.addEventListener("click",func(a));
このようにすると直接関数を呼び出してしまう
b.addEventListener("click",function(){func(1)});
これだと関数側でボタンが参照できない
function func2(n) {
return function (){
alert(n+","+this.tagName);
}
}
関数側で関数を返すようにするとうまくいく
呼び出し側で実現する方法はないでしょうか？
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>引数ありのイベント呼び出し</title> 6 </head> 7 <body> 8 <button type="button" name="button">test</button> 9 10 <script type="text/javascript"> 11 function func(n) { 12 alert(n+","+this.tagName); 13 } 14 function func2(n) { 15 return function (){ 16 alert(n+","+this.tagName); 17 } 18 } 19 var b=document.querySelector('button'); 20 b.addEventListener("click",function(){func(1)}); 21 b.addEventListener("click",func2(1)); 22 23 </script> 24 </body> 25</html> 26
回答3件
0
イベントわたし
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 [].forEach.call(document.querySelectorAll('button'),b=>{ 4 b.addEventListener("click",e=>{func(e.target);}); 5 }); 6}); 7function func(n){ 8 console.log(n.value); 9} 10</script> 11 12<button value="1">1</button> 13<button value="2">2</button> 14<button value="3">3</button> 15
投稿2019/03/13 04:16
総合スコア114843
0
bindじゃいかんのか？
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>引数ありのイベント呼び出し</title> </head> <body> <button type="button" name="button">test</button> <script type="text/javascript"> function func(n, e) { console.log(e); alert(n + "," + e.target.tagName); } var b = document.querySelector('button'); b.addEventListener("click", func.bind(null, "a"), false); </script> </body> </html>
投稿2019/03/13 02:51
退会済みユーザー
総合スコア0
0
js
1b.addEventListener("click", function(){ func.bind(this)(1) } );
とかでしょうか？
ただ、これだとeventを引数で取れなくなりますね。
投稿2019/03/13 03:02
総合スコア36115
あなたの回答
tips
プレビュー
