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

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

<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"が呼び出される

<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!'に変わる

<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!!'に変わる

<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にする

<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"のテキストが変わる

<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"のテキストが「離しました」に変わる

<p id="keypress">あなたが押したキーは…。</p>

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

<p id="key"></p>

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

<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"のテキストが「離しました」に変わる