OptimaLibその３ イベント操作２

　evtNode関数はイベントが発生いたページ上のオブジェクトをDOMを介して取得することができます。これはイベント・ハンドラの関数の中で使えます。引数に使うイベント・オブジェクトはイベント発生時にイベント・ハンドラの引数としてブラウザにより自動的に設定されます。

　前回の例でいえばmyHandler関数内でこのように使います。

myHandler = function(evtObj){
alert("Message from " + evtNode(evtObj).id)}

　これでボタンがクリックされるとアラートが出て"Message from myBtm"と表示されます。仮引数のevtObjは自動的に渡されるので、イベント・ハンドラを追加する際には何も設定する必要はありませんし、もともと設定できません。
　noDefAct関数はエレメントにディフォルトで設定されている、イベント発生時の動作を解除します。おもにはアンカーをリンク・ボタンとして使う場合に利用します。アンカーをクリックするとhref属性に設定されたURLへジャンプする動作がディフォルトで組み込まれていますが、これを止めて後から追加したイベント・ハンドラのみを実行します。
　たとえば上の例の場合、ボタンが<a>タグにより、

<a id="myBtm" href="http://nogaki.cocolog-nifty.com">Hello</a>

となっていると、通常ではsetEvtで設定されたmyHandlerが呼び出されてアラートが表示された後href属性で設定されているURLへジャンプします。ジャンプしたくない場合に、myHandler内でこのnoDefActを実行しておきます。

myHandler = function(evtObj){
noDefAct(evtObj);
以下省略

としておけばＯＫです。noBubbleはイベントの伝播を解除します。たとえば、リンク・ボタンがこのように、

<div>
<p>
<a id="myBtm" href="http://nogaki.cocolog-nifty.com">Hello</a>
</p>
</div>

　他のエレメントの内部にある場合、この<a>タグがクリックされイベント・ハンドラが実行された後、その親エレメントの<p>にもイベントが伝播し、クリック・イベントが発生します。もし<p>にもイベント・ハンドラが設定されていたら、それが実行されます。その後、同様のことが<div>タグにも起るわけです。これがバブリング・フェーズのイベントの伝播です。
　親エレメントにイベント・ハンドラを設定して伝播を利用する場合以外は、決まりごとのように実行しておけばよいでしょう。noDefActと同じで引数はイベント・オブジェクトなので、noBubble(evtObj);としておけば良いです。コードは省略します。

トラックバック・リスト

※プログラミングに関するリストです。
ぜひ、ご参加ください。

凡人のプログラミングTIPS 最近の１０件

Powerd by BlogPeople