フロントエンドを学び直す#5（DOMイベント）
今回はDOMイベントについて学んでいきます。
Event とは
Eventとはユーザが起こしたアクション（クリック、ホバーなど）に対して反応するものです。
インラインイベント
要素にインラインでイベントを書くことができます。ただし、可読性が低下するので非推奨でsu。
<body>
<h1>yeah!</h1>
<!-- クリックしたらアラートが出る -->
<button onclick="alert('hogehogehoge')">クリックしてね</button>
</body>onclickプロパティ
on~ というイベントプロパティが使用できます。例えば、onclick プロパティは要素がクリックされた時のイベントを定義できます。
const btn = document.querySelector('#v2')
// btnがクリックされた時のイベントを定義
btn.onclick = function() {
console.log('クリックした')
console.log('hogehoge')
}addEventListener
ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。 addEventListener を使うメリットは、複数の関数を同じイベントに対して設定できたり、オプションを渡すことで柔軟な変更させることができます。 removeEventListener というのもある。window に対して設置することもできます。
const btn3 = document.querySelector('#v3')
// btn3のクリックイベントの時の関数を設定
btn3.addEventListener('click', function() {
console.log('ボタン3だよ')
})イベントとthis
イベントの中の this は、そのイベントリスナーが追加された要素自体を指します。ただし、アロー関数を使った場合は、その書かれた位置の this を指します。
const h1s = document.querySelectorAll('h1')
for (let h1 of h1s) {
h1.addEventListener('click', colorize)
}
function colorize() {
// ここの this は h1 を指すことになる
this.style.backgroundColor = getRondomColor()
this.style.color = getRondomColor()
}const h1s = document.querySelectorAll('h1')
for (let h1 of h1s) {
h1.addEventListener('click', colorize)
}
const colorize = () => {
// アロー関数で書いた場合、この this は window を指すことになる
this.style.backgroundColor = getRondomColor()
this.style.color = getRondomColor()
}キーボードイベントとイベントオブジェクト
イベントオブジェクト
イベントオブジェクトとは、ユーザーがウェブページ上で何かアクション（クリック、キーボード入力、スクロールなど）を行った際に、そのアクションに関する情報を持つオブジェクトのことです。イベントが発生した際にそのイベントに関する情報（例えば、どの要素で発生したのか、マウスの座標、押されたキーなど）を提供します。
const button = document.querySelector('button')
button.addEventListener('click', function(event) {
// event = イベントオブジェクト、引数として渡される
// ボタンの場合は、PonterEvent（mouseEventを継承したもの）
console.log(event)
})
const input = document.querySelector('input')
input.addEventListener('keyup', function(e) {
// inputの場合は、KeybordEventが渡される
// e.key は、入力された文字
// e.code は、入力されたキーの位置
console.log(`key: ${e.key}`) // Shift （右側のShiftキーを押した場合）
console.log(`code: ${e.code}`) // ShiftRight（右側のShiftキーを押した場合）
})フォームイベントとpreventDefault
preventDefault を使うと、デフォルトの動作を防ぐことができます。例えば、フォーム送信によるページ再読み込みを防ぎたいときに使うと、ページ遷移を止めることができます。
const tweetForm = document.querySelector('#tweetForm')
tweetForm.addEventListener('submit', function(e) {
// フォーム送信がキャンセルされ、ページの再読み込みを防ぐ
e.preventDefault()
const username = tweetForm.elements.username.value
const tweet = tweetForm.elements.tweet.value
addTweet(username, tweet)
})inputとchangeイベント
input イベントは、ユーザーがフォーム要素（例えば、テキスト入力フィールドやテキストエリア）の内容を変更するたびに発火します。つまり、リアルタイムでユーザーが入力している最中に発火するイベントです。
change イベントは、フォーム要素の値が変更され、入力が確定されたタイミングで発火します。例えば、テキストフィールドの場合は、入力後にフォーカスが外れたとき（通常はEnterキーを押すか、他の要素をクリックしたとき）に発生します。
const input = document.querySelector('input')
const h1 = document.querySelector('h1')
// マウスが離れた瞬間に発火
input.addEventListener('change', function(e) {
console.log('change!!')
})
// 変更が加わるたびに1文字ずつ発火
input.addEventListener('input', function() {
h1.innerText = input.value
})イベントのバブリング
イベントのバブリング（Event Bubbling）とは、JavaScriptにおけるイベント伝播の仕組みの一つで、イベントが特定の要素で発生した際に、そのイベントが親要素に向かって順次伝播していくプロセスを指します。イベントが発生した要素から、その親要素、さらにその上位の親要素へと順番に伝播していき、最終的にdocumentまで到達します。
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<button id="child">Click Me</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", function() {
console.log("Parent div clicked");
});
document.getElementById("child").addEventListener("click", function() {
console.log("Button clicked");
});
</script>コンソールには下記のように表示されます。
Button clicked
Parent div clickedstopPropagation()
イベントのバブリングを止めるには、stopPropagation() を使います。このメソッドは、イベントが発生した要素でバブリングを停止させ、親要素への伝播を防ぎます。
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<button id="child">Click Me</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", function() {
console.log("Parent div clicked");
});
document.getElementById("child").addEventListener("click", function(event) {
event.stopPropagation(); // バブリングを止める
console.log("Button clicked");
});
</script>
イベントデリゲーション
イベントデリゲーションとは、親要素に一つのイベントリスナーを設定し、その親要素内で発生した子要素のイベントをまとめて処理するテクニックです。これにより、個々の子要素に対して個別にイベントリスナーを設定する手間を省き、効率的にイベントを管理することができます。
イベントデリゲーションは、イベントのバブリングを利用しています。バブリングによって、子要素で発生したイベントが親要素に伝播するため、親要素でそのイベントをキャッチし、イベントが発生した具体的な子要素を特定して処理します。
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById("myList").addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log(event.target.textContent + " was clicked");
}
});
</script>上記の場合、要素に1つのイベントリスナーを設定し、そのリスナーがリスト項目（ <li> ）で発生したクリックイベントをキャッチして処理します。そのため、リスト項目が動的に増えた場合でも、イベントをキャッチして処理をすることができます。
今回は以上です。