【JavaScript入門】イベント処理するイベントハンドラ（onXXX）
obj.onclick = function(){}でクリックイベントのハンドラを設定することができます。
以下のサンプルはボタンをクリックすると「クリックしました。」とテキストを表示します。
See the Pen
dyvoyaB by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
<div id="output"></div>
js
let btn = document.getElementById("btn");
//イベントハンドラ定義
btn.onclick = function(){
document.getElementById("output").innerHTML += "クリックしました。<br>";
}
同一要素の同一イベントに対して複数の処理を紐づけられないというのは、最後に設定したイベントハンドラのみが有効になるという意味です。
以下がサンプルです。clickハンドラを2つ設定していますが、アラートは最後の「×」しか表示されません。
See the Pen
eventhandler by shiakisudev (@shiakisu)
on CodePen.
HTML
<button id="btn">ボタン1</button>
js
//ボタン要素を取得
let obj = document.getElementById("btn");
//クリックイベントを設定
obj.onclick = function(){
window.alert("○");
}
//クリックイベントを設定
obj.onclick = function(){
window.alert("×");
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！