01 | 2017/03 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

cancel Bubble を理解するために

cancelBubbleプロパティについて 、MSDN ライブラリ アーカイブ>Web開発(全般)>Scripting>SDKドキュメント>Internet SDK>ダイナミックHTML>ドキュメントオブジェクトモデル>イベントモデルの理解 を踏まえて考えてみたい。自らの理解を深め正確にこのプロパティを認識して活用したいからである。なお、MSDNの「イベントモデルの理解」は、全てInternet Explorerに関する記述でしかないが、ここではMozilla系ブラウザでも動作するようにコンテンツを編集拡張した。(Operaやsafariには非対応・・だと思う。(・_・)(._.))

さて、例1では当該コンテンツを囲むDIV要素及び文字shortを含む段落部分に、それぞれイベントハンドラーが設定されている。そして2つ共イベントのバブリングは抑止していない。

例1

見出し1

This is a very short document.

● 例1のHTML文とスクリプト文

● 例1の説明

例1では、ユーザーが"見出し1"をクリックすると、"I was clicked h5"というメッセージが表示され、ユーザーが"short"という単語をクリックすると、2つのメッセージ(まず、"You clicked me SPAN"が表示され、OKボタンをクリックするとその後に、"I was clicked SPAN")が表示される。(h5 や SPAN はクリックイベントが発生元のソースエレメントを示す)

最初の「見出し1」クリックでは、そのクリックによりonclickイベントが発生し、イベントのソース エレメントとしてh5エレメントを設定する。このエレメントに対するイベントハンドラはないので、イベントは階層の親エレメント(DIV)までバブルアップし、そのイベントハンドラであるwasClickedが呼び出される。

次に、ユーザーが"short"をクリックすると、onclickイベントが再び発生する。このとき、SPANエレメントがソース エレメントとして設定される。 SPANに対するイベントハンドラはないので、そのイベントはイベントハンドラーが設定されているPエレメントまでバブルアップし、そのイベントハンドラ関数:wasAlsoClickedが呼び出される。wasAlsoClicked呼び出しが終わると、当該のonclickイベントは次の親エレメント(DIV)まで階層をバブルアップし、wasClickedが呼び出される。

なお、DIVエレメントより更に上層のエレメントから最上層のHTMLエレメントまでの要素には、onclickイベントは設定されていないので、このエントリイのDIVエレメントまででonclickイベントの遡上は終わる。

ここにタグ要素の階層構造は次のようになっている。

  div
  ├─h4
  ├─h5
  └─p
    └─span

2つ目はイベントのバブリングを抑止した例である。

例2

見出し2

This is a very short document.

例2では、2つのイベントハンドラ─が、───SetDivStyleが例2の全体を包含するDIV要素に、また、setParaStyleが「This・・」のP要素に───それぞれ定義されている。ユーザーが「見出し2」をクリックすると、他のブロック要素内の「見出し1」も含めてh5タグ内の文字の色がライムに変わる。ここに、見出し2にはイベントハンドラーは設定されていないが、その親要素であるDIV要素にsetDivStyle()イベントハンドラーが設置してあり、これにより呼び出される関数において、h5タグの色を変えるようにしているので、このエントリイ内のh5タグ(見出し1と見出し2)内の文字の色が変化する。

一方、ユーザーが太字shortをクリックすると、イベントが直上のPタグに到達し、そこに設定されているsetParaStyleハンドラーにより、対応する関数が呼び出され、当該段落にアンダーラインが引かれる。

ここに、setParaStyleイベントハンドラ関数には cancelBubble=true が設定されているので、当該イベントはこれ以上遡上しない。このためDIVに設定されているイベントハンドラー関数は作動しない。

(もし見出し1や見出し2をクリックした後にこのことを確認するには、イベント効果を取り消しボタンをクリックして、見出し1と見出し2の双方のクリック効果を取り消してから、shortをクリックすれば良い。)

● 例2に対して設定されているHTML文とスクリプト文

 

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/429-6da5a207

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200612240152