JavaScript Event学習第9章マウスイベント

5687 ワード
まず、どのようなマウスのイベントがありますか?and_click、dblclick、mousemoveとmouseover mouseout.また、relatedTarget、from Element、toElementといったイベントの属性も説明します.最後はマイクロソフトのmouseenterとmouseleave事件です.
ブラウザの互換性の問題は、ブラウザの互換性リストで見ることができます.
例
ここに一例があります.下の内容を理解するのを手伝ってくれます.
mousedown、mouseup、clickとdblclickはこのリンクの上で登録します.下のテキストボックスの中を見てもいいです.またはダイアログの中で.(原文で試してみてください.
http://www.quirksmode.org/js/events_mouse.htm)
Mousedown、mouseup、click
ユーザーが要素をクリックすると、少なくとも3つのイベントがトリガされます.順序はこうなります.
1、mousedown、ユーザーがこの元素の上でマウスボタンを押す時
2、mouseup、ユーザーがこの元素の上でマウスボタンを離す時
3、clickは、一つのmousedownと一つのmouseupがこの要素で検出された時に発生します.
通常はmousedownとmouseupはclickより役に立ちます.一部のブラウザでは、Oclickのイベント情報の読み取りは許可されていません.また、ユーザーがマウスでいくつかのアクションを行うと、clickイベントが追いつきませんでした.
ユーザーがリンク上でマウスボタンを押したと仮定し、マウスを移動してマウスボタンを放した.この時点でこのリンクはmousedownイベントだけ発生します.同様に、ユーザーがマウスをクリックした後にリンクに移動すると、リンクはmouseupだけです.この二つの状況はいずれもclick事件が発生していません.
これはユーザーの行動によって問題ではないです.しかし、あなたは完全にclickが発生したい場合を除き、Omousedown/upイベントを登録する必要があります.
警告枠を使ったら、ブラウザは事件発生の軌跡と何度かを失う恐れがあり、混乱を引き起こします.だからそれを使わないほうがいいです.
Dblclick
dblclick事件はほとんど使われません.もしあなたが使うなら、OclickとdblclickのイベントハンドラをHTML要素に登録しないでください.二つとも登録したら、ユーザーが何をするかは基本的に不可能です.
つまり、ユーザーが要素をダブルクリックすると、clickイベントは常にdblclickの前に発生する.また、Netscapeでは、2番目のclickは常にdblclickの前に分割されて処理される.いずれにしても、警告枠はここで危険です.
だから、あなたのclickとdblclickの良い分離が多くの複雑なことを避けることができることを保証します.
Mousemove
mousemoveイベントはよく実行されていますが、多くのシステムリソースが必要とされています.すべてのmousemoveイベントを処理します.ユーザがマウスを1つのピクセルに動かすと、mousemoveがトリガされます.何も起こらなくても、長い複雑な関数は長い時間をかけてサイトの効率に影響します.すべてのことが遅くなります.特に古い骨董品の上で.
ですから、一番いい方法は必要な時にオンモスシステムイベントを登録して、使わない時にできるだけ早く削除することです.

   element.onmousemove = doSomething; 
  
// later 
  
element.onmousemove = null;
Mouseoverとmouseout
この例を見てください.mouserverに変えてみてください.この例はev 3にオンモスoverを追加したイベントハンドラだけです.しかし、ev 3だけでなく、イベントがev 4またはspanでトリガされることに気づく.Mozilla 1.3の前にマウスがテキスト領域に入るとトリガされます.
原因はもちろん事件の泡が立つことです.ユーザはev 4でmouseoverイベントをトリガした.この要素にはonmouseoverイベントハンドラはありませんが、ev 3にあります.だから、イベントがev 3に泡を作った時、プログラムは実行されます.
今のような設定は全部正しいですが、もう一つ問題があります.第一の問題は目標です.マウスがev 4に入ったと仮定します.
---------------------------------
|This is div id=「ev 3」|
|-----------------------------|
|?This div id=「ev 4」124;
??---------124124124124;スパーン124124;
??-------124124; 124;
|-----------------------------|
---------------------------------
今この事件のtarget/srcellementはev 4です.イベントの発生要素です.マウスが彼の上に移動したからです.しかし、次のような場合:
---------------------------------
|This is div id=「ev 3」|
|-----------------------------|
|?This div id=「ev 4」124;
??-------124124; 124;
??span 124124124; 124124;
??------>124124124; 124;
??-------124124; 124;
|-----------------------------|
---------------------------------
------>:mouse movement
この事件のタージ/スコープは同じです.このようにマウスがev 4に入ります.しかし、ev 3からマウスが来たり、SPANから来たりすると、違ったことをするかもしれません.だから私たちはマウスがどこから来たのかを知る必要があります.
relatedTarget,from Element,toElement
W 3 Cは、relatedTarget属性をmouseoverとmouseoutイベントに追加しました.mouseoverイベントではマウスを含めてどこから来ましたか?mouseoutの下ではマウスを含めてどこに行きますか?
マイクロソフトには以下の情報を含む二つの属性があります.
1、froomElementとはマウスが来る前の元素のことです.mouseoverの場合に役立ちます.
2、toElementはマウスが行く要素を表しています.mouseoutの場合に有用です.
私達の第一の例では、relatedTarget/froomElementはev 3の引用を含みます.私達の第二の例はSPANです.今はマウスの出所を知っています.
ブラウザをまたぐコード
ですから、もしmouseoverの場合にマウスがどこから来るかを知りたいなら、
 
  
function doSomething(e) { 
  
if (!e) var e = window.event; 
  
var relTarg = e.relatedTarget || e.fromElement; 
  
}
もしmouseoutの場合、マウスの行き先を知りたいなら、
 
  
function doSomething(e) { 
  
if (!e) var e = window.event; 
  
var relTarg = e.relatedTarget || e.toElement; 
  
}
マウスを1つのレイヤーから離します.
レイヤーベースのナビゲーションメニューでマウスがいつレイヤーを離れるかを知る必要があります.そのレイヤーを閉じることができます.ですから、この階のOmouseoutにイベントハンドラを登録しました.その後、イベントの泡が発生し、マウスが任意のレイヤーから離れると、このonmousoutをトリガします.
--------------
|Layer|.onmouseout=doSomething;
|---------|
||Link 124;--> We want to know about this mousout
|---------|
|---------|
??Link 124;
|?butnot about this one
|---------|
--------------
-->:mouse movement
もう一つの停止方法は、マウスをこのレイヤーに移動してリンクすると、ブラウザはこのレイヤーにmouseoutイベントを登録します.これはよく分かりませんが、すべてのブラウザは大丈夫です.
マウスが本当に離れた層の中でどうやってmouseoutを発生させますか?

   function doSomething(e) { 
  
if (!e) var e = window.event; 
  
var tg = (window.event) ? e.srcElement : e.target; 
  
if (tg.nodeName != 'DIV') return; 
  
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; 
  
while (reltg != tg && reltg.nodeName != 'BODY') 
  
reltg= reltg.parentNode 
  
if (reltg== tg) return; 
  
// Mouseout took place when mouse actually left layer 
  
// Handle event 
  
}
まずイベントのtarget、つまりマウスが離れる要素を得ます.もしtargetがDIV(レイヤー)ではないなら、マウスが本当にレイヤーを離れていないので、終了関数を理解します.
もしtargetがレイヤーだったら、マウスがレイヤーから離れたかそれともレイヤーの中に入ったかを確認できません.だから、もう一度事件のrelatedTarget/toElementをチェックします.つまり、マウスの方向に移動する要素です.
この元素を読んで、DOMツリーを通して、イベントのターゲット(すなわちDIV)またはBODY要素まで上に遍歴します.
もし私たちが出会ったtargetがレイヤーのサブ要素だったら、マウスはレイヤーを離れませんでした.関数の運転を停止します.
関数がすべての検証を通してマウスがレイヤーから離れていることを確認できます.私たちは正しい動作を開始できます.
Mouseenterとmouseleave
マイクロソフトにはまだ解決策があります.彼は新しいイベントを2つ追加しました.mouseenterとmouseleaveです.イベントの泡に反応しない以外は、基本的にmouseoverとmouseoutは同じです.彼らは事件を登録した要素を一つのブロックと見なし、ブロック内で発生した
mouseoverとmouseoutは反応しません.
したがって、この2つのイベントは、私たちの問題を解決しました.彼らはバインディングされた要素だけに対してmouseover/out反応をします.
この二つのイベントは5.5以上のIEでのみサポートされています.他のブラウザはいつ参考にしますか?
締めくくりをつける
今はもうイベントの紹介の終わりになりました.幸運です
原文の住所:http://www.quirksmode.org/js/events_mouse.
私のTwitter:@rehawk
Pytochの中のdetachとdetach ch ch ch ch u