Javascript 関数②
addEventListenerとは、
「HTML要素に対して、特定のイベント（例：クリック、マウス移動、キーボード入力など）が発生したときに実行する処理（関数）を登録するためのメソッド」です。
要素.addEventListener('イベント名', 実行したい関数);以下は具体的なコードです。
ボタンをクリックしたらwindowalertで「Hello World」と表示させるコードを書きます。
<div class="container">
<button id = "button">クリックして下さい</button>
</div>.container{
padding: 30px 20px;
}
#button{
width: 200px;
height: 50px;
line-height: 50px;
background-color: rgb(70, 174, 153);
color: #ffff;
display: block;
border-radius: 50px;
border: none;
cursor: pointer;
font-size: 1rem;
}const btn = document.getElementById('button');
btn.addEventListener('click', () => {
window.alert('Hello World');
});コードの説明をします。
HTMLの中からidがbuttonである要素を取得して、btnという定数に代入しています。
ボタンがクリックされたら、window.alertという関数が実行するという意味になっています。
ボタンをクリックするとHello Worldと表示されました。
