5.1 イベント操作の基本
JavaScriptのイベントはユーザーとのインタラクションを可能にし、マウスクリックやキー入力、フォームの変更などのアクションに応じることができるんだよね。イベントハンドラーの追加や削除の方法を理解することは、インタラクティブなWebアプリケーション開発の重要な部分だよ。
イベントって何？
イベントは、"何かが起きたよ"とブラウザが知らせてくれるサインだよ。例えば、ユーザーがボタンをクリックしたり、ページがロードされたりするとね。イベントを使って、そのサインに応じて特定のアクションを実行することができるんだ。
イベントのタイプ
いろいろな種類のイベントがあるよ。よく使われるものにはこんなのがある：
- マウス:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - キーボード:
keydown,keyup,keypress - フォーム:
submit,change,focus,blur - ドキュメント/ウィンドウ:
load,resize,scroll,unload
イベントハンドラー
イベントハンドラー（またはイベントリスナー）は、特定のイベントに応じて実行される関数だよ。特定のイベントを"聴いて"いて、それが発生すると起動するんだ。
5.2 イベントハンドラーの追加
addEventListenerでのイベントハンドラーの追加
addEventListenerメソッドを使って、イベントハンドラーを要素に追加できるよ。HTMLの属性（onclick, onchangeなど）を使うよりも柔軟でコントロールしやすいんだ。
構文:
element.addEventListener(event, handler, options);
ここで:
element: イベントハンドラーを追加する要素event: 応答する必要があるイベントのタイプ（例：'click', 'input', 'keydown'）handler: イベントが発生したときに呼び出される関数options: 追加のパラメータ（オプションの引数）
例: clickイベントハンドラーの追加
この例では、ボタンにイベントハンドラーを追加するよ。ユーザーがボタンをクリックすると、通知メッセージが表示されるよ。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
例: 複数のイベントハンドラーの追加
addEventListenerを使って、1つのイベントに複数のハンドラーを追加できるよ。
この例では、2つのイベントハンドラーをボタンに追加するよ。クリック時に、両方のハンドラーが順番に実行されて、コンソールにそれぞれのメッセージを表示するよ。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 optionsパラメータの使用
optionsパラメータを使って、イベントハンドラーの動作をカスタマイズできるよ。よく使うオプションは：
once:trueの場合、ハンドラーは一度だけ呼び出され、しかも自動的に削除されるよcapture:trueの場合、イベントはバブリングの代わりにキャプチャ段階で処理されるよpassive:trueの場合、ハンドラーがpreventDefault()を決して呼び出さないことを示すよ
例: 一度だけ実行されるハンドラー
この例では、イベントハンドラーは一度だけ実行され、その後自動的に削除されるよ。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 イベントハンドラーの削除
removeEventListenerでイベントハンドラーの削除
removeEventListenerメソッドを使って、addEventListenerで追加したイベントハンドラーを削除できるよ。削除するには、追加したときと同じ引数を渡す必要があるんだ。
構文:
element.removeEventListener(event, handler, options)
どこで：
element: イベントハンドラーを削除する要素event: 削除する必要があるイベントのタイプhandler: イベントハンドラーとして割り当てられた関数options: 追加パラメータ（ハンドラー追加時に使用したパラメータと一致する必要がある）
例: clickイベントハンドラーの削除
この例では、ボタンにclickイベントハンドラーを追加するよ。もう一つのボタンを押すことで、clickイベントハンドラーが削除されるよ。
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION