ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptイベントオブジェクトの詳しい解説と使用例_基礎知識

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

WBOY
リリース: 2016-05-16 17:12:46
オリジナル
1007 人が閲覧しました

イベントは、イベントが発生した要素、キーボードのステータス、マウスの位置、マウス ボタンのステータスなどのイベント ステータスを表します。イベントが発生すると、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() イベントをキャンセルすることを示しています。 (身体)機能。

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




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


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


12.returnValue
説明:設定または查在イベント内で返される値
语法:event.returnValue[ = Boolean]
可能な値:
真のイベント中の値が返されます
false ソースオブジェクト上のイベントの操作が取り消されます

13.screenX
説明: 检测マウス标用ユーザー画面の水平位置
説明:event.screenX
注釈:
これは唯一のプロパティです。これは、マウス マークの現在の位置を取得することのみが可能であり、マウス マークの位置を変更するために使用することはできないことを意味します。 > 説明: ユーザーのスクリーンに対するマウス マークの垂直位置を検出します
説明:event.screenY
注釈:
これは唯一のプロパティです。これは、これによってのみマウス マークの現在の位置を取得できることを意味します。

15.shiftKey
説明: シフトボタンの状態。

16.srcElement
説明: トリガーイベントの要素を返します。のみ説明。例を参照。
説明: イベント.srcElement

17.srcFilter
説明: onfilterchange イベントのトリガーを返します。のみ。 onmouseover および onmouseout イベントが発生すると、マウスが挿入される要素が表示されます。上時,弹出一对话框,表示“マウスが到着しました”




复制代码


代码如下:


<スクリプト>
function testMouse(oObject) {
if(oObject.contains(event.toElement))
{
alert("マウスが到着しました"); 19.type
説明: イベント名を返します。
説明法:event.type
注釈:
は、前のイベント名として「on」を返しません。 onclick イベントが返されるタイプは click
のみです。

20. x
説明: css プロパティに位置プロパティがある上位要素に対するマウス マークを返します。css プロパティに位置プロパティがある上位要素がない場合は、BODY 要素が参照オブジェクトとして認識されます。 .x
注釈:
イベントが発生した場合、マウスはマウスの外に移動し、返される値は -1 です。
これは唯一のプロパティです。これは、それによってのみマウスの現在を取得できることを意味します。
21. y
説明: css プロパティに位置プロパティがある上位要素に対するマウス マークを返します。css プロパティに位置プロパティがある上位要素がない場合は、BODY 要素が参照オブジェクトとして認識されます。 .y
注釈:
イベントが発生した場合、マウスはマウスの外に移動し、返される値は -1 です。
これは唯一のプロパティです。これは、それによってのみマウスの現在を取得できることを意味します。この位置を使用してマウスマークの位置を変更することはできません。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート