jQueryの基本 Part4

jQueryの基本 Part4

こんにちわ!ひよっ子プログラマuskです!ザ☆夏!今年の夏も暑いですね~!みなさんは夏といえば、海でしょうか?山でしょうか? 海か山か!そんな僕はクーラーの効いた部屋でゲーム派です☆さてさて、今回もjQueryの基本です! 今回は
"on","bind","live","delegate"の違いについて
取り上げていこうかと思います! ・・・が、その前に、それを確認するに当たって覚えておきたいワードの

「バブリング」、「キャプチャリング」について

取り上げます!それぞれの意味は、簡単にから言うと「イベントの伝播」で、その違いはスタートとゴールの違いです。バブリングは、イベント発生要素からルート要素まで伝播します。 逆にキャプチャリングは、ルート要素からイベント発生要素を探しにいきます。キャプチャリングに関しては、ほとんど使われることはないかと思います。 バブリングのほうが使われる頻度は多いかと思います。このキャプチャリング、バブリングはイベントによって発生するものとしないものがあります。例えば、 "mouseover/mouseout"イベントはキャプチャリング、バブリングが発生し、 "mouseenter/mouseleave"イベントはキャプチャリング、バブリングが発生しません。
mouseover実行例
この場合、一番大きい黒のボックスにカーソルを合わせたとき、点滅します。 しかし、赤や青のボックスにカーソルを合わせたときにも点滅が発生してしまいます。このような実装でも問題ないときもありますが、 黒のボックスにカーソルを合わせたときだけ点滅するようにしたい場合は、以下のようにしましょう。
mouseenter実行例
これなら、黒のボックスにカーソルを合わせたときだけ点滅するようになります。
まとめ
・キャプチャリング、バブリングについて、イベントは親要素、子要素にも伝播することがある。 ・イベントによって、伝播するものしないものが存在する。

Previous: EC-CUBE3を始めよう! – part2 – Next: PC版のWebサイトのテキストボックスにも[type=”tel”]と[type=”email”]を使おう

© 2017 ALL CONNECT Inc. All Rights Reserved.