ユーザーイベントタイプの場合、最も一般的に使用されるのは、マウス、キーボード、ブラウザです。
1。マウスイベント:
すべてのマウスイベントは頻繁に使用されます。次の例を使用して、さまざまなマウスイベントをテストします。
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数ハンドル(oevent){
var disp = document.getElementById( "display");
if(window.event)oevent = window.event; //互換性を処理し、オブジェクトを取得します
Disp.innerhtml + = "マウスイベント名:" + oevent.type + "<br>";
}
window.onload = function(){
var op = document.getElementById( "box");
op.onmousedown = handle;
op.onmouseover = handle;
op.onmouseup = handle;
op.onmouseout = handle;
op.onclick = handle;
op.ondblclick = handle;
}
</script>
<div>
<div id = "box">
ボックスコンテンツ
</div>
<p id = "display"> </p>
</div>
マウスキー価値ボタンテスト(参照テーブル付き)
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数testclick(oevent){
var odiv = document.getElementById( "display");
if(window.event)
oevent = window.event;
odiv.innerhtml += oevent.button; //ボタンの値を出力します
}
document.onmousedown = testclick;
window.onload = testclick; //テストはキーを押していません
</script>
<div>
<p id = "display"> </p>
</div>
2。キーボードイベント
キーボードイベントには多くの種類のイベントはありません。イベントには3種類しかありません。
キーダウン(キーを押し、押し続けると引き続きトリガーされます)
キープレス(キーが押されて文字が生成されたときにトリガーされます。つまり、Shift、Alt、Ctrlなどの機能キーを無視します)
keyup(キーがリリースされたときにトリガー)
キーボードリスニングの例:
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数ハンドル(oevent){
if(window.event)oevent = window.event; //互換性を処理し、イベントオブジェクトを取得します
var odiv = document.getElementById( "display");
odiv.innerhtml + = oevent.type + ""; //出力イベント名
}
window.onload = function(){
var otextarea = document.getElementById( "textin");
otextarea.onkeydown = handle; //すべてのキーボードイベントを聞いてください
otextarea.onkeyup = handle;
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
キーボードの場合、最も重要なことはイベントの名前ではなく、どのキーが押されているかです。 IEにはCharCodeプロパティがないため、KeyCodeは、キーダウンイベントとキーアップイベントが発生した場合にのみ標準DOMキーコードと同じです。
キープレスイベントでは、次の方法が使用されます。
コードコピーは次のとおりです。OEVENT.CHARCODE=(Oevent.Type == "keypress")?oevent.keycode :();
キーコードが採用されていない理由は、出力文字ではなくキーボードキーを表すためです。したがって、出力「A」と「A」、キーコードは同等であり、Charcodeは文字によって区別されます。
さらに、キープレスでは、標準DOMのキーコード値は常に0です。
例:キーボードイベントの関連プロパティ:
コードコピーは次のとおりです。
<スクリプト言語= "javascript">
関数ハンドル(oevent){
var odiv = document.getElementById( "display");
if(window.event)oevent = window.event; //互換性を処理し、イベントオブジェクトを取得します
// IE Charcodeの値を設定します
oevent.charcode =(oevent.type == "keypress")? Oevent.Keycode:0;
odiv.innerhtml + = oevent.type + ":charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>"; //出力テスト
}
window.onload = function(){
var otextarea = document.getElementById( "textin");
otextarea.onkeydown = handle; //すべてのキーボードイベントを聞いてください
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
3.HTMイベント
ブラウザの場合、さまざまなHTMLイベントに独自のイベントがあり、それらのいくつかは、ロード、エラー、選択などのユーザーによってしばしばさらされます。一般的に使用されるHTMLイベントは次のとおりです。
ロードイベントは、一般的に使用されるイベントの1つです。これは、ページの読み込みが完了する前にDOMフレームワークが構築されていないため、関連する操作は発生しないためです。
負荷をウィンドウオブジェクトに割り当てます。アンロードイベントは、<body>でマークされたオンロードメソッドとonunloadメソッドに相当します。