JavaScriptではいろんなイベントに合わせて処理を実装するケースがありますが、イベントの制御をしないといけない場面もあるかと思います。そんな時によく使うメソッド2つを備忘録として残しておきたいと思います。
デフォルトのイベントをキャンセルする「preventDefault()」
各要素にはデフォルトでイベントに合わせた処理が用意されており、例えば下記のように、aタグでhref属性を設定している場合、クリックするとhref属性に指定した値の先へ遷移する形になります。また、input要素のtype属性がsubmitの場合にはformタグで指定しているaction属性に指定した値の先に遷移するなどの仕様になっています。
【HTML】
<a href="https://example.com" id="anchor">リンクテキスト</a> <form action="https://example.com" method="post"> <input type="submit" id="submit" value="送信する"> </form>
そこで、aタグをクリックした場合にリンク先へ遷移させたくない場合、遷移する前に何らかの処理を挟みたいという場合には、デフォルトのイベントを制御する必要があります。そんな時には「preventDefault()」を使う事で、デフォルトにイベントをキャンセルすることができます。
【javascript】
const element = document.getElementById('anchor');
element.addEventListener('click', (event) => {
event.preventDefault();
alert('リンクテキストがクリックされました');
});
preventDefault()を使う場合は呼び出し元のコールバック関数に引数を入れておくとイベントオブジェクトが取得できるので、その引数に対してメソッドを実行します。また、preventDefault()を使うことで、スクロールを禁止したりといったユーザー操作をコントロールすることもできます。どちらかといえばその方が利用するケースが多いかもしれません。
イベント子要素から親要素へのイベント伝播を防ぐ「stopPropagation()」
JavaScriptでは子要素のクリックイベントはそのまま親要素にも適用されてしまうという特性があります。その現象をイベントのバブリング（伝播）と呼びます。例えば下記のように、要素が入れ子になっている状態で、子要素をクリックすると、親要素のクリックイベントも呼び出されて実行されてしまいます。
【HTML】
<div id="parent"> 親要素 <div id="child"> 子要素 </div> </div>
【javascript】
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => {
console.log('親要素がクリックされました');
});
child.addEventListener('click', () => {
console.log('子要素がクリックされました');
});
このようにコンソールで確認すると、子要素をクリックした場合には親要素のクリックイベントも発火されてしまいます。
【console】
"子要素がクリックされました" "親要素がクリックされました"
機能によってはこのイベントのバブリングが思わぬ誤動作を招いてしまうことがあります。そんな時には下記のように子要素のイベントに対して「stopPropagation()」メソッドを使うことで簡単にイベントのバブリングを防ぐことができます。
【javascript】
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', (event) => {
console.log('親要素がクリックされました');
});
child.addEventListener('click', (event) => {
event.stopPropagation();
console.log('子要素がクリックされました');
});
こちらも、preventDefault()の時と同じように呼び出し元にコールバック関数に引数を持たせて、イベントオブジェクトを取得し、そのイベントオブジェクトに対してメソッドを実行します。実際にコンソールで確認してみると、イベントのバブリングが起こっていないことが確認できます。
【console】
"子要素がクリックされました"
今回はJavaScriptでのイベント制御でよく使うメソッドについてまとめてみました。目立たないようなものですが、ウェブ制作では欠かすことのできない場面もありますので、2つ合わせて覚えておきたいですね。
