要素をクリックして関数を呼び出す場合
- element.onclick = 関数名;
- element.addEventListener('click', 関数名);
このように
.onclick または addEventListener で呼び出せますが
addEventListener で書くと複数呼べることがわかった時の備忘録
.onclick は後から書いた方で上書きされるのでひとつしか呼べない
呼び出す関数が一つの場合
bt1.onclick = hello;
bt2.addEventListener('click', hello);
どちらも指定した関数が呼ばれる → hello が実行される
呼び出す関数が複数の場合
bt3.onclick= hello;
bt3.onclick = thanks;
bt4.addEventListener('click', hello);
bt4.addEventListener('click', thanks);
bt3.onclickは2つめの thanks で上書きされる→ thanks が実行される
bt4.addEventListenerは2つめが追加される → hello の次に thanks が実行される
呼ばれる関数
function hello(){ alert("hello"); } function thanks(){ alert("thanks"); }
他に試してみたこと
こういうボタンを作って
<button id="bt" onclick="hello">bt</button>
bt.onclick = thanks;
にしてbtボタンをクリックして hello ではなく thanks が呼び出されることを確認
bt.addEventListener('click', thanks);
にしてbtボタンをクリックして hello の後に thanks が呼び出されることを確認
引数を渡したい場合
引数を渡して実行したい関数を無名関数function(){}の中に入れる
element.onclick = function() { get_value(0) };
element.addEventListener('click', function() { get_value(1) });
変数を引数で渡す時は
var key = "hello"
element.onclick = function() { get_value(key) };
element.addEventListener('click', function() { get_value(key) });
参考
HTML DOM addEventListener() Method
https://www.w3schools.com/jsref/met_element_addeventlistener.asp