このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Javascript addEventListener イベント伝播

JavaScript

2013.04.07

この記事は最終更新日から1年以上が経過しています。

Javascriptを用いたスマートフォンUIや、webアプリケーションなどを制作していく際、タッチスタートのイベントだったり、タッチムーブのイベントだったりと、domにイベントを色々と登録し、イベントを発生させていくかと思うのですが、その際、イベントを登録する為の関数、addEventListenerを用いてイベントを持たせていくのですが、a要素などにイベントを追加し、何か処理を行おうとすると、クリックやタッチをすると、通常の動作のリンク先に飛ぶ。という動作になったりします。

この動作を回避するためには、event.preeventDefault();を用いて、通常の動作(リンク)を無効にします。

event.preeventDefault();

また、現在のイベントを止めるときは、stopPropagation();でのさらなる伝播を止める事ができます。

event.stopPropagation()

さあ、ここでイベントの伝播とは?という話になるのですが、イベントの伝播とはDOM上でイベントが発生した際の伝わり方。といったところでしょうか。

主に使うのはCaptureフェーズと、Bubblingフェーズの2種類であり、これはイベントを登録する際のaddEventListenerの第3引数で指定することが可能となっております。

1.Captureフェーズ:ルートオブジェクト(HTMLだとDocumentオブジェクト)からイベントが発生したオブジェクトに向かって子孫要素をたどっていき、順にイベントハンドラに対し処理をディスパッチしていく。

2.Bubblingフェーズ: イベントが発生したオブジェクトの直接の親要素から、その子孫(ルートオブジェクト側)に向かってたどっていき、順にイベントハンドラに対し処理をディスパッチしていく。

3.Targetフェーズ: イベントが発生したオブジェクト上のイベントハンドラに対し処理をディスパッチする。

図で表すと以下の様な感じとなります。

false:BubblingフェーズまたはTargetフェーズ

document.getElementById("btn").addEventListener("click", hoge, false);

true:Captureフェーズ(use Cature)

document.getElementById("btn").addEventListener("click", hoge, true);

このようにaddEventListenerの第3引数のuseCapture を true にすることによって、Captureフェーズに切り替えることができます。この引数は全てのブラウザで省略可能ではないのですが、省略した場合はfalseとなり、Bubblingフェーズとなります。

通常、falseに設定して利用することが多いです。

というのも、trueつまり、Captureフェーズにすると、同typeのイベントを登録した要素が存在した際、同イベントを発生させた要素の親要素であるイベントが先に発生しまう結果となります。

上記の例で言うと、divとpにclickイベントを追加し、divをクリックするとアラート「div」、pをクリックするとアラート「p」を発生。

pをクリックした際、Bubblingフェーズだと、p→divとイベントの伝播が行われるが、

Captureフェーズだと、div→pとイベントの伝播が行われる。

この事を避けるためでもある。

テスト

http://webcyou.com/demo/js/event/eventlistener.html

stopPropagation();

イベントの伝播について分かったと思いますので、元に戻り、stopPropagation()についてですが、

これらのイベントの伝播を中止することができます。

この、stopPropagation()を先程のテストのdivに追加してみました。

Bubblingフェーズだと、p→divとイベントの伝播行われていますが、

Captureフェーズだと、divの時点でイベント伝播が終了しているのが確認できます。

テスト

http://webcyou.com/demo/js/event/eventlistener02.html

 

ちょっと凝ったUI制作や、webアプリケーションを開発する際は、複数addEventListenerを使用していくこともあって、このことも考えておくとよろしいかと思います。

ではでは。

Comment

Related Article

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

ブラウザフィンガープリントは、Cookieの代用となるのか? JSライブラリ Fingerprintjs2など。

2019.02.03

Vue.jsでSPA、Vuex使用するなら Nuxt.jsが超絶便利な件。

2018.12.23

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

CATEGORY LIST

LATEST NEWS

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US