リスティング広告 運用代行サービス|株式会社カルテットコミュニケーションズ|Yahoo広告/Google広告正規代理店

JavaScript – イベントバブリング

公開日:
更新日:

DOMにはイベントバブリングという仕組みがある事をご存知でしょうか?

近年はjavascriptライブラリの普及で、知らず知らずのうちに使っていたり
存在を知らずにいる方もいるかと思います。

便利な機能ですので有効的に活用しましょう!

イベントバブリングとは?

DOMで発生したイベントを伝播する仕組みです。

イベントの伝播には、「キャプチャリングフェーズ」「バブリングフェーズ」があり、

  • キャプチャリングフェーズで親から子へ
  • バブリングフェーズで子から親へ

とイベントが伝播されます。

下記の用なDOM構成で<div.bubbling-top>をクリックした場合を例にあげてみます。

[html]
<div class="bubbling-bottom">
<div class="bubbling-middle">
<div class="bubbling-top"></div>
</div>
</div>
[/html]

※キャプチャリングフェーズはIE9以下のバージョンが対応していないため、使われない事が多いです。

この通り、DOMのイベントはイベントが発生したDOM自身以外からも把握することができるのです。

メリット?

イベントバブリングを利用した場合、何が良いの?

  1. 大量のDOMのイベントを把握したい時に、イベントリスナーを大量に登録する必要がない。
  2. DOMツリーにDOMが追加されたり削除される度に、イベントリスナーの登録や削除をする必要がない。

適切に利用すれば処理速度の改善や、面倒なロジックの記述量を減らす事ができます。

実際のコード

リンクにマウスオーバーした際の処理を想定してみます。

[html]
<div id="container">
<!– リンクのマウスオーバー時に処理を実行したい –>
<a href="#" class="popup">~~~</a>
<a href="#" class="popup">~~~</a>
….
<a href="#" class="popup">~~~</a>
</div>
[/html]

イベントバブリングを使わずに、イベントリスナーを登録する場合、DOMの数だけイベントリスナーを登録する必要があります。

[js]
// ライブラリなし
var popups = document.getElementsByClassName("popup");

for (var i = 0, length = popups.length; i < length ; i++) {

popups[i].addEventListener("mouseover", function(e){
// mouseover

}, false);

}

// jQuery
$(".popup").mouseover(function(e){
// mouseover

});

[/js]

非力でメモリの少ないモバイル端末も増えていますので、出来る限りクライアントサイドの処理は軽くしたいですよね。

そこでイベントバブリングを利用すれば、どれだけ大量のDOMがあったとしてもイベントリスナー1つで済ます事も可能なのです。

[js]
// ライブラリなし
var container = document.getElementById("container");

container.addEventListener("mouseover", function(e){
if (e.target.className.indexOf("popup") > -1) {
// mouseover

}
}, false);

// jQuery (version >= 1.7)
$("#container").on("mouseover", ".popup", function(e){
// mouseover

});
[/js]

手軽に利用でき工夫の余地も増えますので、興味のある方は試してみてはいかかでしょうか。

1営業日以内に返信いたします 広告の運用代行についてのお問い合わせはこちら
シェアする

ブログ記事の中で広告運用の事例をご紹介することがありますが、実際の事例を一部加工した内容となっておりますのでご留意ください。

また、2018年7月24日よりGoogle AdWordsはGoogle広告に名称変更されました。それ以前の記事に関してはGoogle AdWordsと表記されておりますのでご了承ください。


リスティング広告の
情報をお届け

メルマガではリスティング広告に詳しくなれる記事を毎週一週間分まとめてお届けします。不定期にはなりますがリスティング広告に限らず、Web集客改善に繋がる資料もお送りしていきますので、興味のある方はぜひご登録ください。

同じカテゴリの最近の記事