【8/31まで 今季最大のセール開催中!】Udemyの人気コースが今なら1,200円から!!

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

【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がオススメ!同僚に差をつけよう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です