【JavaScript入門】イベント処理するイベントハンドラ（onXXX）

イベントハンドラの設定
同一要素の同一イベントに対して複数の処理を紐づけられないとは

イベントハンドラの設定

obj.onclick = function(){}でクリックイベントのハンドラを設定することができます。
以下のサンプルはボタンをクリックすると「クリックしました。」とテキストを表示します。

HTML

<button id="btn">ボタン1</button>
<div id="output"></div>

let btn = document.getElementById("btn");
//イベントハンドラ定義
btn.onclick = function(){
    document.getElementById("output").innerHTML += "クリックしました。<br>";
}

同一要素の同一イベントに対して複数の処理を紐づけられないとは

同一要素の同一イベントに対して複数の処理を紐づけられないというのは、最後に設定したイベントハンドラのみが有効になるという意味です。
以下がサンプルです。clickハンドラを2つ設定していますが、アラートは最後の「×」しか表示されません。

HTML

<button id="btn">ボタン1</button>

//ボタン要素を取得
let obj = document.getElementById("btn");

//クリックイベントを設定
obj.onclick = function(){
  window.alert("○");
}
//クリックイベントを設定
obj.onclick = function(){
  window.alert("×");
}