LANG SELRCT

コードを書く場所についてはこちら

2018年1月6日土曜日

.onclick と .addEventListener('click', ...


要素をクリックして関数を呼び出す場合

  • 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