Javascriptの基礎(2) イベント_基礎知識

イベントオブジェクト: (イベントオブジェクトはウィンドウオブジェクトのプロパティです。イベントが発生すると、同時にイベントオブジェクトが生成されます。イベントが終了すると、イベントオブジェクトは消滅します)

IE の場合: window.event;//オブジェクトを取得します

DOM 内: argument[0];// オブジェクトを取得します

IE でよく使用される Event オブジェクトの属性メソッド:

1.clientX: イベント発生時のクライアント領域(ツールバー、スクロールバーなどを除く)のマウスポインタのX座標

。

2.clientY: イベント発生時のクライアント領域(ツールバー、スクロールバーなどを除く)のマウスポインタのY座標

。

3.keyCode: keyCode イベントの場合は、押されたキーの Unicode 文字を示します。keydown/keyup イベントの場合は、押されたキーボードが数値インジケーターであることを示します (キーの値を取得します)。

4.offsetX: イベントをトリガーしたオブジェクトに対するマウス ポインターの X 座標。

5.offsetY: イベントをトリガーしたオブジェクトに対するマウス ポインターの Y 座標。

6.srcElement: イベントを発生させた要素

DOM 内のイベント オブジェクトの一般的に使用される属性メソッド:

1.clientX;

2.clientY;

3.pageX; ページに対するマウス ポインターの X 座標。

4.pageY; ページに対するマウス ポインターの Y 座標。

5.StopPropagation: このメソッドを呼び出すと、イベントのさらなる伝播 (バブル) を防ぐことができます。

6.ターゲット: トリガーされたイベント要素/オブジェクト

7.type: イベントの名前

2 つのイベント オブジェクトの類似点と相違点

:

同じ点:

1. イベントの種類を取得します。 2. キーボード コード (キーダウン/キーアップ イベント) を取得します。

3. Shift、Alt、Ctrl を検出します。

4. クライアント領域の座標を取得します。

5. 画面座標を取得します。

相違点:

1. ターゲットを取得します。

//IE: var oTarget=oEvent.srcElement;

//DOM: var oTarget=oEvent.target;

2. 文字コードを取得します。

//IE: var iCharCode=oEvent.keyCode;

//DOM: var iCharCode=oEvent.charCode;

3. イベントのデフォルトの動作をブロックします。

//IE: oEvent.returnValue=false;

//DOM: oEvent.preventDefault;

4. バブリングを終了します:

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

イベントの種類:

1. マウスイベント:

onmouseover: マウスが移動したとき

onmouseout: マウスが外に出るとき onmousedown: マウスが押されたとき

onmouseup: マウスを離したとき; onclick: マウスの左ボタンをクリックするとき

ondblclick: マウスの左ボタンをダブルクリックしたとき

2. キーボードイベント:

onkeydown: ユーザーがキーボードのキーを押したときに発生します。

onkeyup: ユーザーが押したキーを放したときに発生します。

keypress: ユーザーが

キーを押し続けるとき。

3. HTML イベント:

onload: ページをロードするとき

onunload: ページをアンロードするとき

abort: ユーザーが読み込みプロセスを終了すると、プロセスが完全に再読み込みされていない場合、中止イベントが発生します

error: JavaScript エラーが発生したときに生成されるイベント select: 入力エリアまたはテキストエリアで、ユーザーが文字を選択すると、select イベントがトリガーされます

change: 入力エリアまたはテキストエリアでフォーカスを失うと、選択

で変更イベントがトリガーされます。

submit: フォームが送信されると、submit イベントがトリガーされます。

リセット:リセット

resize: ウィンドウまたはフレームのサイズが変更されたときにトリガーされるイベント

scroll: ユーザーがスクロールするか、スクロール バーを使用するとトリガーされるイベント

フォーカス: フォーカスが失われたとき

ぼかし: フォーカスを取得するとき

JavaScript イベントモデル

1.JavaScript イベント モデル: 1. バブルの種類: ユーザーがボタンをクリックしたとき: input-body-html-document-window (下から上にバブル) IE のブラウジングデバイスはバブリングを使用するだけです

2. キャプチャの種類: ユーザーがボタンをクリックしたとき: window-document-html-body-input (上から下へ)

ECMA 標準化後、他のブラウザは両方のタイプをサポートし、キャプチャが最初に行われます。

2. 伝統的な行事の 3 つの書き方:

1.

2.======<script>function name1(){alert('helloword!');}</script> /有名な機能

3. //匿名関数

コードをコピー

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

Var button1=document.getElementById("input1");

button1.onclick=function(){ アラート('helloword!') }

3. 現代の出来事の書き方:

コードをコピー


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

//IE にイベントを追加します

var fnclick(){
alert("クリックされました")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
-----------------------------------------------
Oinput.detachEvent("onclick",fnclick);//IE のイベントを削除

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

//DOM にイベントを追加します

var fnclick(){
alert("クリックされました")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
-----------------------------------------------
Oinput.removeEventListener("onclick",fnclick);//DOM 内のイベントを削除

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

IE および DOM のイベント追加と互換性があります

var fnclick1=function(){alert("クリックされました")}
var fnclick2=function(){alert("クリックされました")}
var Oinput=document.getElementById("input1");
if(document.attachEvent){
Oinput.attachEvent("onclick",fnclick1)
Oinput.attachEvent("onclick",fnclick2)
}
else(document.addEventListener){
Oinput.addEventListener("click",fnclick1,true)
Oinput.addEventListener("click",fnclick2,true)
}