【js】addEventlistnerについて

js

JavascriptのaddEventListnerについてまとめています。

サマリ

  • オブジェクトにJavascriptのイベントを登録することができる
  • 複数のイベントを登録することができる
  • イベント内のthisはaddするオブジェクトを指す
<body>
    <button id="btn">Change ButtonText Color</button>
    <script src="index.js"></script>
</body>

const btn = document.querySelector('#btn');

function changeColor() {
    this.style.color = 'red';
}
function changeBgColor() {
    this.style.backgroundColor = 'green';
}

btn.addEventListener('click', changeColor);
btn.addEventListener('click', changeBgColor);