このサイトは、只今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

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

2017.10.09

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

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US