DOMイベントの基本
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ドキュメント</title>
</head>
<body>
<script>
// イベントの三要素: 1.イベントソース(どの要素にイベントをバインドするか) 2.イベントタイプ(どの種類のイベントをバインドするか) 3.イベントハンドラ(イベント発生後の処理)
const btn = document.querySelector('button');
btn.addEventListener('click', function () {
console.log('クリックされました');
});
</script>
</body>
</html>
イベントオブジェクトとその使用法
<html lang="ja">
<head>
<style>
.container { width: 400px; height: 400px; border: 1px solid #000; }
.child { width: 200px; height: 200px; background-color: #f00; margin: 100px auto; }
</style>
</head>
<body>
<button>クリック</button>
<div class="container">
<div class="child"></div>
</div>
<a href="">リンク</a>
<script>
const button = document.querySelector('button');
button.addEventListener('click', (e) => {
console.log('ボタンがクリックされました');
console.log(e.target);
});
const link = document.querySelector('a');
link.addEventListener('click', (e) => {
e.preventDefault();
console.log('リンクがクリックされました');
});
</script>
</body>
</html>
thisキーワードの指向性
<html lang="ja">
<body>
<div class="container">
<div class="child"></div>
</div>
<script>
const container = document.querySelector('.container');
container.addEventListener('click', function (e) {
console.log('クリックされた要素:', e.target);
console.log('イベントハンドラーがバインドされている要素:', this);
});
</script>
</body>
</html>
マウスイベントの詳細
<html lang="ja">
<head>
<style>
.box { width: 400px; height: 400px; border: 1px solid #000; overflow: auto; }
.content { width: 200px; height: 800px; background-color: pink; margin: 100px auto; }
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
<script>
const box = document.querySelector('.box');
box.addEventListener('scroll', () => {
console.log('スクロールされました');
});
box.addEventListener('contextmenu', (e) => {
e.preventDefault();
console.log('右クリックメニュー');
});
</script>
</body>
</html>
フォームイベントの使い方
<html lang="ja">
<body>
<input type="text">
<form action="./example.html">
<input type="text">
<input type="submit">
<input type="reset">
</form>
<script>
const inputField = document.querySelector('input[type=text]');
const formElement = document.querySelector('form');
inputField.addEventListener('change', () => {
console.log('内容が変更されました');
});
formElement.addEventListener('submit', (e) => {
e.preventDefault();
console.log('フォームが送信されました');
});
</script>
</body>
</html>
イベントリスナーの登録方法
<html lang="ja">
<body>
<div class="element"></div>
<script>
const element = document.querySelector('.element');
element.addEventListener('click', () => {
console.log('イベント1');
});
element.addEventListener('click', () => {
console.log('イベント2');
});
</script>
</body>
</html>
イベントバブリングとその抑制
<html lang="ja">
<body>
<div class="parent">
<div class="child1">
<div class="child2"></div>
</div>
</div>
<script>
const parent = document.querySelector('.parent');
const child1 = document.querySelector('.child1');
const child2 = document.querySelector('.child2');
parent.addEventListener('click', () => {
console.log('親要素がクリックされました');
});
child1.addEventListener('click', (e) => {
console.log('子要素1がクリックされました');
e.stopPropagation();
});
</script>
</body>
</html>
ループによるイベントバインディング
<html lang="ja">
<body>
<ul class="menu">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<script>
const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', () => {
item.style.backgroundColor = 'lightpink';
});
});
</script>
</body>
</html>
イベント委譲の実装例
<html lang="ja">
<body>
<ul class="menu">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<script>
const menu = document.querySelector('.menu');
menu.addEventListener('click', (e) => {
e.target.style.backgroundColor = 'lightblue';
});
</script>
</body>
</html>