JSのイベント対象--知識点まとめ

6069 ワード

JavaScript マウス firefox インターネット explorer イベントのプロパティ

イベント記述:イベントはイベントの状態、例えばイベントオブジェクトをトリガする要素、マウスの位置、状態、キーを押すなどを表します.
イベント対象はイベント発生中のみ有効です.
イベントのいくつかの属性は特定のイベントにのみ意味があります.
例えば、from ElementとtoElementの属性はオンモスoverとオンモスアウトイベントだけに意味があります.
Event属性と方法:
1.type:イベントの種類、例えばonlickのclick;
説明:イベント名を返します.
文法:event.type
注:「on」がプレフィックスでないイベント名を返します.例えば、オンリーイベントで返されるtypeはclickです. 読み取り専用です.
2.srcerement/target:事件の発生源は、事件の発生要素である.
下の例では、マウスがリンク上でクリックされているかどうかを確認し、shiftキーが押されたら、リンクのジャンプをキャンセルします.

< HTML>
<HEAD><TITLE>Cancels Links</TITLE> 
<SCRIPT LANGUAGE="JScript"> 
function cancelLink() { 
if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 
window.event.returnvalue = false; 
} 
</SCRIPT> 
< BODY onclick="cancelLink()">

3.button:宣言が押されたマウスボタン、整数は、複数のボタンを押すと、これらの値を加算しますので、3は左右のボタンを同時に押します.
(firefoxの0は左キー、1は中間キー、2は右ボタン)
説明:押したマウスボタンを確認します.
文法:event.button
可能な値: 0ボタンなし 1左ボタンを押す 2右ボタンを押す 3左右のボタンを押します 4中央キーを押す 5左キーと中間キーを押します. 6右ボタンと中間キーを押します. 7すべてのキーを押します
注意しますこの属性はonmousedown、onmouseup、およびonmousemooveのみに使用されます. イベント.他のイベントに対しては、マウスの状態に関係なく0に戻ります.
4.clientX/clientY:イベントが発生した時、マウスはブラウザウィンドウに対して文書領域の左上の位置を見ます.(DOM規格では、この2つの属性値はドキュメントのスクロール状況を考慮していません.つまり、ドキュメントがどこにスクロールしても、イベントがウィンドウの左上隅で発生する限り、CientXとclientYは0です.だから、IEでイベント発生の座標がドキュメントの先頭に対して位置しているかを確認したいです.
Dcument.body.scrollLeftとdocument.body.scrollTop)
5.offsetX、offsetY/layerX、layerY:イベントが発生した時、マウスはソースの左上隅の位置に相対します.
6.x,y/pageX,pageY:親要素のマウスの水平座標に対する整数を検索する.
説明:css属性に対してマウスの上位要素の座標を返します.css属性にposition属性の上位要素がない場合は、デフォルトではBODY要素を参照対象とします.
以下の例では、ステータスバーにマウスの現在位置を表示します.
…
＜BODY onmousemoove=“window.status=”X='＋window.event.x+’Y='＋window.event.y”
7.altKey、ctrlKey、shiftKeyなど:ブール値を返します.
8.keyCode:keydown何keyupイベントが発生した時にキーを押すコードと、keyphesイベントのユニックキャラクターを返します.(firefox 2はevent.keycodeをサポートしていません.event.whichで代替できます.)
9.froomElement、toElement:前者はmouseoverイベントでマウスが移動した文書要素を指し、後者はmouseoutイベントでマウスが移動した文書要素を指す.
toElement 説明:onmouseoverとonmouseoutイベントが発生した時にマウスが入る要素を検出します.
文法:event.toElement
これは読み取り専用の属性です.
例:次のコードはマウスをボタンに移動したときに、ダイアログを開き、「mouse arrived」を表示することを示しています.

<SCRIPT> 
function testMouse(oObject) { 
if(oObject.contains(event.toElement)) { 
alert("mouse arrived"); 
} 
} 
</SCRIPT> 
: 
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

説明:onmouseoverとonmouseoutイベントが発生した時、マウスが離れた要素を検出します.
文法:event.from Element
これは読み取り専用の属性です.
10.cancel Bbble:ブール属性をtrueに設定すると、停止イベントをさらに包容層の要素に泡立てる.
(e.ccel Bubble=true;e.stopPropagation();
上の要素のイベントの制御を受けるかどうかを検出します.
文法:event.ccel Bbble[=cancel Bbble]
可能な値: これは読み書き可能なブール値です. TRUEは上層原素のイベントによって制御されない. FALSEは上の要素のイベントによって制御することができます.これはデフォルトです
例: 下のコード断片は、画像上でクリックしたときに、Shiftキーが押されると、上の要素(body)上のイベントonclickによって引き起こされるshowSrc()関数をキャンセルすることを示しています.

<SCRIPT LANGUAGE="JScript"> 
function checkCancel() { 
if (window.event.shiftKey) 
window.event.cancelBubble = true; 
} 
function showSrc() { 
if (window.event.srcElement.tagName == "IMG") 
alert(window.event.srcElement.src); 
} 
</SCRIPT> 
<BODY onclick="showSrc()"> 
<IMG onclick="checkCancel()" SRC="sample.gif">

11.returnValue:1つのブール属性は、falseに設定された場合、ブラウザを組織してデフォルトのイベント動作を実行することができます.
(e.return Value=false;e.preventDefault();
説明:イベントからの値の設定またはチェック
文法:event.returnvalue[=Boolean]
可能な値:trueイベントの値が返されます. falseソースオブジェクト上のイベントのデフォルトの操作がキャンセルされた例は、本明細書の先頭を参照してください.
12.atachEvent()、detachEvent()/addEvent Listener()、removeEveventListener:DOMオブジェクトイベントタイプを作成するために複数のイベント処理関数を登録する方法で、二つのパラメータがあります.一つはイベントタイプ、二つはイベント処理関数です.はい、
atachEvent()イベントが実行される時、thisキーワードはwindowオブジェクトを指します.イベントが発生したその要素ではありません.
13.screenX、screenY:マウスポインタはディスプレイの左上隅の位置に対して、新しいウィンドウを開くなら、この2つの属性はとても重要です.
14 propertyName
説明:要素の変化した属性の名前を設定または返します.
文法:event.propertyName[=s Propty]
可能な値:sPropertyは、イベントで変更された属性の名前を指定または戻す文字列です. この属性は読み書き可能です.標準値がありません
onpropertychangeイベントを使うことで、propertyNameの値を得ることができます.
例:次の例は、onpropertychangeイベントを使用して、ダイアログが開き、propertyNameの値が表示されます.

<HEAD> 
<SCRIPT> 
function changeProp() 
{ 
btnProp.value = "This is the new value"; 
} function changeCSSProp() 
{ 
btnStyleProp.style.backgroundColor = "aqua"; 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<P>The event object property propertyName is 
used here to return which property has been 
altered.</P> <INPUT TYPE=button ID=btnProp onclick="changeProp()" 
value="Click to change the value property of this button" 
onpropertychange=’alert(event.propertyName+" property has changed value")’> 
<INPUT TYPE=button ID=btnStyleProp 
onclick="changeCSSProp()" 
value="Click to change the CSS backgroundColor property of this button" 
onpropertychange=’alert(event.propertyName+" property has changed value")’> 
</BODY>

いくつかの説明: 1. イベントはイベントの状態を表します.例えば、イベントオブジェクトをトリガする要素、マウスの位置や状態、ボタンを押すなどです. 2. イベントオブジェクトはイベント発生中のみ有効です. firefoxのイベントはIEと違って、IEの中のグローバル変数はいつでも使えます.firefoxではパラメータで案内してこそ使えます.運転時の臨時変数です. IE/Operaではwindow.eventであり、Firefoxではイベントである.イベントの対象は、IEではwindow.event.srceであり、Firefoxではevent.targetであり、Operaの両方が利用できる. 3. 下の二つの効果は同じです. var evt=(evt)evt:((window.event)?window.event:null); var evt=evt𞓜window.event;firefoxの下でwindow.eventはnullで、IEの下でイベントはnullです. 4. IEにおけるイベントの泡立ち IEにおけるイベントは、包容層に沿って、上層部に少しずつ泡を立てることができ、すなわち、下層部のDOMノードで定義されるイベントハンドラ関数は、上層部のノードに、下層部と同じイベントタイプのイベントハンドラ関数があると、上層部のイベントハンドリング関数も実行される.例えば、divタグにはaが含まれています.この二つのラベルには全部onclickイベントの処理関数があると、実行する場合は先にラベルaのonclickイベント処理関数を実行してからdivのイベント処理関数を実行します.希望するイベントハンドラが実行された後、上位のdivのOclickのイベントハンドリング関数を実行したくないなら、cancel Bbbleをtrueに設定すればいいです.

javascript学習中の体験と重点(2)