今回はイベントについて勉強します。
今までは「<input type=”button” value=”OK” onclick=”keisan(4)”>」のonclickで感知して動くイベントでjavascriptを動かしていましたが、今回は違う書き方で動かします。
HTMLファイル側はこんな風に書いてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
タイトル
</title>
</head>
<body>
<input type="button" class="event" value="button" id="xxx">
<script src="js/test.js"></script>
</body>
</html>js/test.js側は下記のように書いてください。
document.addEventListener('DOMContentLoaded', () => {
function buttonClick(){
alert('Click');
}
let button = document.getElementById('xxx');
button.addEventListener('click', buttonClick);
});コードの説明です。
addEventListenerは「~がきっかけで動く」とかそんな意味です。
document.addEventListenerのdocumentはWebページ全体を指しています。
‘DOMContentLoaded’でページが読み込まれた時という意味です。
「() =>」は元々関数を指定する場所ですが、今回は関数ではなくそのまま中身を書くので代わりにこれを書いています。
「let button = document.getElementById(‘xxx’);」はidがxxxのものに反応するように変数に格納するという意味です。
そして「button.addEventListener(‘click’, buttonClick);」は変数button（idがxxxに反応するように設定されてる）関数buttonClickをクリックされたら動かすという意味です。
下はクラスで感知するタイプのものです。
document.addEventListener('DOMContentLoaded', () => {
function buttonClick(){
alert('Click');
}
const event = document.querySelector(".event");
event.addEventListener('click', buttonClick);
});これはeventタグで動くという意味です。
このコードの全体の意味は、ページが読み込まれた後、idがxxx（一つ目のjsコード）eventタグ（二つ目のjsコード）のものがクリックされたら「buttonClick」が動くという意味です。
event.addEventListener(‘click’, buttonClick);のclickの部分は他にもload（画像も含めてページが読み込まれた時）、scroll（画面がスクロール）したときがありますが、あまり覚えきれないと思うので、今回はclickのみにします。
それではまた次回。
コメント