【Java Script】イベントを追加するaddEventListener

こばゆた
こばゆた

今回はJava Scriptを使ってイベントを追加してみます

きなこ
きなこ

HTMLやCSSで作ったものが動くって感動だね

こばゆた
こばゆた

簡単なイベントでも作れるとようやくJava Scriptが楽しくなってくるからね

スポンサーリンク

1.addEventListener( )

セレクター名.addEventListener('イベントの種類', 関数名);

第1引数にはイベントの種類、第2引数には関数があれば関数名を記入します。

こばゆた
こばゆた

よく使われるイベントは以下の通りです

よく使われるイベント
イベント名イベントの起こるタイミング
clickクリックしたとき
dblclickダブルクリックしたとき
mouseoverカーソルがターゲットに乗ったとき
mouseoutカーソルがターゲットから降りたとき
mousemoveカーソルが移動したとき
mousedownマウスボタンを押しているとき
mouseup押したマウスボタンが上がったとき
keypressキーボードのキーを押しているとき
keydownキーを押しているとき
keyupキーを離したとき
こばゆた
こばゆた

その他のイベントはMDNを参照してください

イベントリファレンス | MDN
この記事では、興味のありそうな主なイベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベントを実装する主なクラスの索引を提供します。最後には、ドキュメント化されたすべてのイベントの一覧を掲載しています。
こばゆた
こばゆた

ここからは実際に作ってみます

1-1.関数を読み込む場合

<p>Hello!</p>
<div id="btn">change</div>
const text = document.querySelector('p'); //p要素を取得して定数"text"へ代入
const btn = document.getElementById('btn'); //id名"btn"を取得して定数"btn"へ代入

function changeText(){
  text.textContent = 'Good Bye!';
}
//"text"の文章を'Good Bye!'に変える関数"changeText"を用意

btn.addEventListener('click',changeText);
//クリックすると関数"changeText"が呼び出される

Hello!

change

1-2.アロー関数に含める場合

<p>Hello!</p>
<div id="btn">change</div>
const text = document.querySelector('p'); //p要素を取得して定数"text"へ代入
const btn = document.getElementById('btn'); //id名"btn"を取得して定数"btn"へ代入

btn.addEventListener('click',() =>{
  text.textContent = 'Good Bye!';
});
//クリックすると"text"の文章が'Good Bye!'に変わる

Hello!

change
こばゆた
こばゆた

ここからは実際に例を見ていこうと思います

なおここからはアロー関数を使う方法に統一して説明していきます

スポンサーリンク

2.イベント

2-1.click, dblclick

文字通りクリックやダブルクリックがイベントを起こす条件となるものです。

<p id="text">Hello!</p>
<div id="clickBtn">click!</div>
<div id="dblClickBtn">dblclick!</div>
const text = document.getElementById('text'); //id名”text”を取得して定数"text"へ代入
const clickBtn = document.getElementById('clickBtn'); //id名”clickBtn”を取得して定数"clickBtn"に代入

clickBtn.addEventListener('click', () =>{
  text.textContent = 'click!';
});
//"clickBtn"をクリックすると"text"のテキストが'click!'に変わる

const dblClickBtn = document.getElementById('dblClickBtn'); //id名”dblClickBtn”を取得し定数dblClickBtnに代入
dblClickBtn.addEventListener('dblclick', () =>{
  text.textContent = 'double click!!';
});
//"dblClickBtn"をダブルクリックすると"text"のテキストが'double click!!'に変わる

Hello!

click!
dblclick!

2-2.mouseover, mouseout

mouseoverはカーソルがターゲットに乗ったとき、mouseoutはカーソルがターゲットから降りたときにイベントが発動します。

<div id="box"></div>
const box = document.getElementById('box'); //id名"box"を取得し定数"box"に代入
box.addEventListener('mouseover', () =>{
  box.style.backgroundColor = 'red';
});
//"box"にカーソルが乗ったら背景色を赤にする

box.addEventListener('mouseout', () =>{
  box.style.backgroundColor = '#ddd';
});
//"box"からカーソルが降りたら背景色を#dddにする

boxの上にカーソルを乗せてください

2-3.mousemove

mousemoveはマウスカーソルが移動している間にイベントが発動します。

<p id="point">枠内のX座標を取得します。</p>
<div id="frame"></div>
const frame = document.getElementById('frame'); //id名"frame"を取得し定数"frame"に代入
const point = document.getElementById('point'); //id名"point"を取得し定数"point"に代入

frame.addEventListener('mousemove', e =>{
  point.textContent = `枠内のX座標は${e.offsetX}です`;
});
//"frame"の中でマウスを動かすと画面上でのx軸の座標を取得し、id名"point"のテキストが変わる

枠内のX座標を取得します。

eはeventの略でイベントの引数に設定する事でイベントの要素を取得できます。

イベントの要素を取得する
取得方法取得するもの
e.target要素を取得
e.pageX/Yページ全体を通しての座標(左上を基準)
e.clientX/Yブラウザウインドウ内での座標(左上を基準)
e.offsetX/Y要素内の座標
<div id="frame2"></div> 
<div>target:<span id="target">クリックすると要素を取得できます</span></div>
<div>pageX:<span id="pageX"></span></div>
<div>pageY:<span id="pageY"></span></div>
<div>clientX:<span id="clientX"></span></div>
<div>clientY:<span id="clientY"></span></div>
<div>offsetX:<span id="offsetX"></span></div>
<div>offsetY:<span id="offsetY"></span></div>
const box = document.getElementById('frame2');

window.addEventListener('mousemove', (e)=>{
  document.getElementById('pageX').textContent = e.pageX;
  document.getElementById('pageY').textContent = e.pageY;
  document.getElementById('clientX').textContent = e.clientX;
  document.getElementById('clientY').textContent = e.clientY;
  document.getElementById('offsetX').textContent = e.offsetX;
  document.getElementById('offsetY').textContent = e.offsetY;
});
window.addEventListener('click', e=>{
  document.getElementById('target').textContent = e.target;
});
target:クリックすると要素を取得できます
pageX:
pageY:
clientX:
clientY:
offsetX:
offsetY:

2-4.mousedown, mouseup

<p id="mouse"></p>
const mouse = document.getElementById('mouse'); //id名"mouse"を取得し定数"mouse"に代入
window.addEventListener('mousedown', () =>{
  mouse.textContent= '押してます';
});
//画面上でマウスを押し込むと、id名"mouse"のテキストが「押してます」に変わる

window.addEventListener('mouseup', () =>{
  mouse.textContent= '離しました';
});
//画面上ででマウスを離すと、id名"mouse"のテキストが「離しました」に変わる

マウスボタンを押し続けてください

こばゆた
こばゆた

セレクターを”window”とすると画面上が対象となります

2-5.keypress

<p id="keypress">あなたが押したキーは…。</p>
const keyPress = document.getElementById('keyPress') //id名"keyPress"を取得し定数"keyPress"に代入
window.addEventListener('keypress', e =>{
  keyPress.textContent=  `あなたが押したキーは${e.key}です。`;
});
//画面上でキーボードを押すと押したキーが"keyPress"に表示される

文字キーと一部のキーが押された時のみ反応します。

こばゆた
こばゆた

どれが反応するかは実際にキーボードを打ってみてください

あなたが押したキーは…。

2-6.keydown, keyup

<p id="key"></p>
const key = document.getElementById('key'); //id名"key"を取得し定数"key"に代入
window.addEventListener('keydown', e =>{
  key.textContent= `あなたが押したキーは${e.key}です。`;
});
//画面上でキーボードを押すと押したキーが"key"に表示される

keypressと異なり修飾キーを含めた全てのキーが押された時に反応します。

こばゆた
こばゆた

こちらもどれが反応するかキーボードを打ってみてください

あなたが押したキーは…。

<p id="key2"></p>
const key2 = document.getElementById('key2'); //id名"key2"を取得し定数"key2"に代入
window.addEventListener('keydown', () =>{
  key2.textContent= '押してます';
});
//画面上でキーボードを押し込むと、id名"key2"のテキストが「押してます」に変わる

window.addEventListener('keyup', () =>{
  key2.textContent= '離しました';
});
//画面上でキーボードを離すと、id名"key2"のテキストが「離しました」に変わる

キーボードのキーを押し続けてください

3.まとめ

イベントを追加する まとめ
セレクター名.addEventListener('イベントの種類', 関数名);

第1引数にはイベントの種類、第2引数には関数があれば関数名を記入する

イベント名イベントの起こるタイミング
clickクリックしたとき
dblclickダブルクリックしたとき
mouseoverカーソルがターゲットに乗ったとき
mouseoutカーソルがターゲットから降りたとき
mousemoveカーソルが移動したとき
mousedownマウスボタンを押しているとき
mouseup押したマウスボタンが上がったとき
keypressキーボードのキーを押しているとき
keydownキーを押しているとき
keyupキーを離したとき

引数にeventの略であるeを設定する事でイベントの要素を取得できる

セレクター名.addEventListener('イベントの種類', e =>{
  //処理
});

取得方法取得するもの
e.target要素を取得
e.pageX/Yページ全体を通しての座標(左上を基準)
e.clientX/Yブラウザウインドウ内での座標(左上を基準)
e.offsetX/Y要素内の座標

コメント

トップへ戻る