頭脳一式 
コールバック関数を外だしにする
以下のサンプルではボタンをクリックすると「クリックされました！!」というテキストが出力されます。
See the Pen
KKWpPzL by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
<div id="output"></div>
js
let obj = document.getElementById("output");
document.getElementById("btn").addEventListener('click',print,false);
function print(){
obj.innerHTML += "クリックされました！!<br>";
}
イベントが発生した要素にアクセスする
以下のサンプルではボタンをクリックすると「クリックされました！!」というテキストが出力され、ボタンのテキストが「クリック済み」に変わります。
See the Pen
VwpLZPM by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
<div id="output"></div>
js
let obj = document.getElementById("output");
document.getElementById("btn").addEventListener('click',print,false);
function print(e){
obj.innerHTML += "クリックされました！!<br>";
e.target.textContent = "クリック済み";
}
コールバック関数に引数を渡す
以下のサンプルではボタンをクリックすると「クリックされました！!」というテキストが出力され、ボタンのテキストがクリックした回数に変わります。
See the Pen
JjWdjra by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
<div id="output"></div>
js
let obj = document.getElementById("output");
let cnt = 0;
document.getElementById("btn").addEventListener('click',function(e){
let x = ++cnt
print(e,x);
},false);
function print(e,str){
obj.innerHTML += "クリックされました！!<br>";
e.target.textContent = str;
}
同一要素の同一イベントに対して複数の処理を紐づける
イベントリスナーは、同一要素の同一イベントに対して複数紐付ることができます。
以下のサンプルはボタンをクリックすると「○」→「△」の順でアラートが表示されます。
See the Pen
addEventListener by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
js
document.getElementById("btn").addEventListener('click',function(){
window.alert("○");
},false);
document.getElementById("btn").addEventListener('click',function(){
window.alert("△");
},false);
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！
