JavaScriptイベントオブジェクトの詳しい解説と使用例_基礎知識

イベントは、イベントが発生した要素、キーボードのステータス、マウスの位置、マウス ボタンのステータスなどのイベント ステータスを表します。イベントが発生すると、Event オブジェクトが生成されます。たとえば、ボタンがクリックされると、対応するイベント オブジェクトがブラウザのメモリ内に生成されます。
イベント オブジェクトはイベント中にのみ有効です。
イベントの一部の属性は、特定のイベントに対してのみ意味を持ちます。たとえば、fromElement プロパティと toElement プロパティは、onmouseover イベントと onmouseout イベントに対してのみ意味を持ちます。

[イベント属性]:
altKey、button、cancelBubble、clientX、clientY、ctrlKey、fromElement、keyCode、offsetX、offsetY、propertyName、returnValue、screenX、screenY、shiftKey、srcElement、srcFilter、toElement、タイプ、x、y
------------------------------------------ --- -------------------------------------
1.altKey
説明: alt キーの状態を確認します。
構文:event.altKey
可能な値:
Alt キーが押された場合、値は TRUE になり、それ以外の場合は FALSE になります。読み取り専用。

2.button
説明: 押されたマウス ボタンを確認します。
構文:event.button
可能な値:
0 ボタンが押されていません
1 左ボタンを押します
2 右ボタンを押します
3 左ボタンと右ボタンを押します
4 中央のボタンを押します
5 左キーと中央キーを押します
6 右キーと中央キーを押します
7 すべてのキーを押します
この属性は、onmousedown、onmouseup、および onmousemove イベントでのみ使用されます。その他のイベント (onclick など) の場合は、マウスの状態に関係なく 0 が返されます。

3.cancelBubble
説明: 上位要素のイベントの制御を受け入れるかどうかを検出します。
構文:
event.cancelBubble[ = cancelBubble]
可能な値:
これは読み取りおよび書き込み可能なブール値です:
TRUE は、上位要素のイベントによって制御されません。
FALSE を指定すると、上位要素のイベントによって制御できます。これがデフォルト値です。
例:
次のコード スニペットは、画像をクリックするとき (onclick)、Shift キーも同時に押されると、上部要素の onclick イベントによってトリガーされる showSr​​c() イベントをキャンセルすることを示しています。 （身体）機能。

コードをコピー コードは次のとおりです:

4.clientX
説明: マウスの X 座標を返します。ウィンドウのクライアント領域。
構文:event.clientX
コメント:
これは読み取り専用のプロパティです。これは、マウスの現在位置を取得するためにのみ使用でき、マウスの位置を変更するために使用することはできないことを意味します。

5.clientY
説明: ウィンドウのクライアント領域内のマウスの Y 座標を返します。
構文:event.clientY
コメント:
これは読み取り専用のプロパティです。これは、マウスの現在位置を取得するためにのみ使用でき、マウスの位置を変更するために使用することはできないことを意味します。

6.ctrlKey
説明: Ctrl キーの状態を確認します。
構文:event.ctrlKey
可能な値:
Ctrl キーが押された場合、値は TRUE になり、それ以外の場合は FALSE になります。読み取り専用。

7.fromElement
説明: onmouseover および onmouseout イベントが発生したときにマウスが離れる要素を検出します。 参照: 18.toElement
構文:event.fromElement
コメント:
これは読み取り専用のプロパティです。

8.keyCode
説明: キーボードイベントに対応する内部コードを検出します。このプロパティは、onkeydown、onkeyup、および onkeypress イベントに使用されます。
構文:event.keyCode[=keyCode]
可能な値:
これは読み取りおよび書き込み可能な値であり、Unicode キーボードの内部コードにすることができます。キーボード イベントが発生しなかった場合、値は 0 です。

9.offsetX
説明: イベントをトリガーしたオブジェクトを基準としたマウス位置の水平座標を確認します
構文:event.offsetX

10.offsetY
説明: イベントをトリガーしたオブジェクトに対する相対的なマウス位置の垂直座標を確認します
構文:event.offsetY

11.propertyName
説明: 変更されたプロパティの名前を設定または返します要素の。
構文:event.propertyName [= sProperty]
可能な値:
sProperty は、イベントをトリガーした要素のイベントで変更されたプロパティの名前を指定または返す文字列です。
このプロパティは読み取りおよび書き込み可能です。デフォルト値はありません。
注:
propertyName の値は、onpropertychange イベントを使用して取得できます。
例:
次の例では、onpropertychange イベントを使用してダイアログ ボックスをポップアップし、propertyName の値を表示します。

コードをコピー コードは次のとおりです:

function changeProp()
{
btnProp.value = "これが新しい VALUE です";
}
function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}

イベント オブジェクトのプロパティ propertyName は、
変更されたプロパティを返すために
使用されます。

VALUE="クリックしてこのボタンの VALUE プロパティを変更します"
onpropertychange='alert(event.propertyName) プロパティが変更されました値")">
onclick="changeCSSProp()"
VALUE="クリックしてこのボタンの CSS 背景色プロパティを変更します"
onpropertychange='alert(event.propertyName " プロパティの値が変更されました")'>