JavaScriptノートをよく勉強する(十一)--イベントのタイプ
8615 ワード
技術交流を歓迎します。QQ：138986722
イベントのタイプ:は、イベントをトリガする事象およびイベントが発生するオブジェクトに応じて、ブラウザで発生するイベントをいくつかのタイプに分けることができる.DOM規格では、以下のイベントのセットが定義されています.
1、マウスイベント
<html>
<head>
<title> </title>
<script type="text/javascript">
function testEvent(oEvent){
var oText = document.getElementById("textId");
oText.value += "
"+oEvent.type;
}
</script>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;"
onclick="testEvent(event);" ondblclick="testEvent(event);" onmouseover="testEvent(event);"
onmousedown="testEvent(event);" onmousemove="testEvent(event);"
onmouseout="testEvent(event);" onmouseup="testEvent(event);" >
</div>
<br/>
<textarea id="textId" rows="30" cols="100"></textarea>
<br/>
</body>
</html>mouseoverとmouseoutイベントを使用することは、ページ上の何かの外観を変更する方法であり、次のimgのような流行の方法です.これは非常に簡単なテクニックですが、よく使われています.
1.1イベントの属性
各マウスイベントは、次のeventオブジェクトのプロパティに値を入力します.<html>
<head>
<title> </title>
<script type="text/javascript">
function testEvent(oEvent){
var oText = document.getElementById("textId");
oText.value += "
"+oEvent.type;
oText.value += "
at("+oEvent.clientX+","+oEvent.clientY+") ";
oText.value += "
at("+oEvent.screenX+","+oEvent.screenY+") ";
oText.value += "
button down is "+oEvent.button;
var keys = [];
if(oEvent.shiftKey){
keys.push("Shift");
}
if(oEvent.ctrlKey){
keys.push("Ctrl");
}
if(oEvent.altKey){
keys.push("Alt");
}
oText.value += "
keys down are " +keys;
}
</script>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: red;"
onclick="testEvent(event);" ondblclick="testEvent(event);" onmouseover="testEvent(event);"
onmousedown="testEvent(event);" onmousemove="testEvent(event);"
onmouseout="testEvent(event);" onmouseup="testEvent(event);" >
</div>
<br/>
<textarea id="textId" rows="30" cols="100"></textarea>
<br/>
</body>
</html>これらのプロパティには、マウスイベントが発生したばかりの情報が表示されます.
1.2手順
clickイベントがトリガーされる前に、mousedownイベントが発生し、mouseupイベントが発生します.同様に、dblclickイベントをトリガーするには、同じターゲットで次のイベントを順番に発生します.マウスを移動してあるオブジェクトから別のオブジェクトに入ると、先に発生するイベントはmouseout(マウスが移動したオブジェクト)です.次に、両方のオブジェクトでmousemoveイベントがトリガーされます.最後に、マウスが入ったオブジェクトでmouseoverイベントをトリガーします.
2キーボードイベント
キーボードイベント→ユーザによるキーボードの動作開始.次のキーボードイベントがあります.<html>
<head>
<title> </title>
<script type="text/javascript">
function testEventText(oEvent){
var oText = document.getElementById("textId");
oText.value += "
"+oEvent.type;
}
</script>
</head>
<body>
<textarea id="textId" rows="30" cols="100"></textarea>
<br/>
<textarea id="textKeyId" onkeydown="testEventText(event);"
onkeypress="testEventText(event);" onkeyup="testEventText(event);"
rows="30" cols="100"></textarea>
<br/>
</body>
</html>従来の要素はキーボードイベントをサポートしていますが、テキストボックスに文字を入力すると、これらのイベントが最も簡単に表示されます.
2.1イベントのプロパティ
注意Shift、Ctrl、AltまたはMetaキーを押すと、対応する属性がTrueに設定されているほか、keydownイベントが発生します.テスト:
<html>
<head>
<title> </title>
<script type="text/javascript">
function testEventText(oEvent){
var oText = document.getElementById("textId");
oText.value += "
"+oEvent.type;
oText.value += "
keyCode is " + oEvent.keyCode;
oText.value += "
charCode is " + oEvent.charCode;
var keys = [];
if(oEvent.shiftKey){
keys.push("Shift");
}
if(oEvent.ctrlKey){
keys.push("Ctrl");
}
if(oEvent.altKey){
keys.push("Alt");
}
oText.value += "
keys down are " +keys;
}
</script>
</head>
<body>
<textarea id="textId" rows="30" cols="100"></textarea>
<br/>
<textarea id="textKeyId" onkeydown="testEventText(event);"
onkeypress="testEventText(event);" onkeyup="testEventText(event);"
rows="30" cols="100"></textarea>
<br/>
</body>
</html>2.2手順
ユーザーが文字キーを1回押すと、次の順序でイベントが発生します.(1)keydown;
(1)keypress;
(2)keyup.
ユーザーがCtrlなどの非文字キーを1回押すと、次の順序でイベントが発生します.
(1)keydown;
(2)keyup.
ユーザーが文字キーを押して放さない場合、keydownイベントとkeypressイベントは、キーを放すまで連続的にトリガーされます.ユーザーが文字以外のキーを押して放さない場合、keydownイベントのみがトリガーされます.