イベントオブジェクト:(イベントオブジェクトはウィンドウオブジェクトのプロパティです。イベントが発生すると、イベントオブジェクトが同時に生成されます。イベントオブジェクトは終了し、イベントオブジェクトは消えます)
IE:window.event; //オブジェクトを取得します
in dom:argument [0]; //オブジェクトを取得します
IEのイベントオブジェクトの共通属性メソッド:
1.ClientX:イベントが発生すると、クライアント領域のマウスポインターのx座標(ツールバー、スクロールバーなどを除く);
2.クライアンティ:イベントが発生すると、クライアント領域のマウスポインターのy座標(ツールバー、スクロールバーなどを除く);
3.Keycode:キーコードイベントでは、キープレスのユニコード文字を示し、キーダウン/キーアップイベントでは、プレスされたキーボードが数値インジケーターであることを示します(キーの値を取得)。
4.Offsetx:イベントを引き起こしたオブジェクトに対するマウスポインターのx座標。
5.Offsety:イベントを引き起こしたオブジェクトに対するマウスポインターのy座標。
6. srcelement:イベントを発生させる要素。
DOMのイベントオブジェクトの共通属性メソッド:
1.ClientX;
2.Clienty;
3.Pagex;ページに対するマウスポインターのx座標。
4.Pagey;ページに対するマウスポインターのy座標。
5.ストッププロパゲーション:この方法を呼び出すことで、イベントのさらなる伝播を防ぐことができます(バブル)。
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。マウスイベント:
オンマウスオーバー:マウスが移動したとき。
オンマウスアウト:マウスが移動したとき。
OnMousedown:マウスが押されたとき;
onMouseUp:マウスが飼育されているとき。
OnClick:左マウスボタンをクリックするとき。
ondblclick:左マウスボタンをダブルクリックするとき。
2。キーボードイベント:
OnKeyDown:ユーザーがキーボードのキーを押したときに発生します。
OnKeyUp:ユーザーが押されたキーをリリースしたときに発生します。
キープレス:ユーザーがキーを押し続けるとき。
Three.htmlイベント:
オンロード:ページをロードするとき。
onunload:ページをアンインストールするとき。
中止:ロードプロセスが終了する前にユーザーが完全に再現されていない場合、完全に再現されていない場合、中止イベントが発生します。
エラー:JavaScriptでエラーが発生したときに生成されたイベント。
選択:ユーザーが入力またはTextareaで文字を選択したときにトリガーされた選択イベント
変更:入力またはTextareaでは、フォーカスを失うと、変更イベントがSelectでトリガーされます
送信:フォームが送信されたら、送信イベントがトリガーされます。
リセット:リセット
サイズ:ウィンドウまたはフレームがサイズ変更されたときにトリガーされるイベント。
スクロール:ユーザーがスクロールまたはスクロールバーがあるときに発生したイベント。
焦点:焦点が失われたとき。
Blur:フォーカスが得られるとき。
JavaScriptイベントモデル
1。JavaScriptイベントモデル:1。バブルタイプ:<入力タイプ= "ボタン">ユーザーがボタンをクリックしたとき:input-body-html-document-window(bubble from to top)ieブラウザはバブルを使用します
2。キャプチャタイプ:<入力タイプ= "ボタン">ユーザーがボタンをクリックしたとき:window-document-html-body-input(上から下)
ECMA標準化の後、他のブラウザは2つのタイプをサポートし、最初にキャプチャが発生します。
2。従来のイベントを書く3つの方法:
1. <入力型= "ボタン" onclick = "alert( 'helloworld!')">
2. <入力型= "ボタンonclick = name1()"> ====== <script> function name1(){alert( 'helloword!');} </script> // name function
3. <input type = "button" id = "input1"> //匿名関数
コードコピーは次のとおりです。
<スクリプト>
var button1 = document.getElementById( "input1");
button1.onclick = funtion(){
アラート( 'Helloword!')
}
</script>
3。モダンなイベントライティング方法:
コードコピーは次のとおりです。
<input type = "button" id = "input1"> // IEでイベントを追加します
<スクリプト>
var fnclick(){
アラート(「私はクリックされました」)
}
var oinput = document.getElementById( "input1");
oinput.attachevent( "onclick"、fnclick);
---------------------------------------------------
oinput.detachevent( "onclick"、fnclick); // ieでイベントを削除します
</script>
コードコピーは次のとおりです。
<input type = "button" id = "input1"> // domにイベントを追加します
<スクリプト>
var fnclick(){
アラート(「私はクリックされました」)
}
var oinput = document.getElementById( "input1");
oinput.addeventlistener( "onclick"、fnclick、true);
---------------------------------------------------
oinput.removeeventlistener( "onclick"、fnclick); // domの削除イベント
</script>
コードコピーは次のとおりです。
<input type = "button" id = "input1"> // 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)
}
</script>