【8/27まで】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】イベント処理するaddEventListenerの使い方

【JavaScript入門】イベント処理するaddEventListenerの使い方

コールバック関数を外だしにする

以下のサンプルではボタンをクリックすると「クリックされました!!」というテキストが出力されます。

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);

コメントを残す

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