Event事件----鼠标键盘举例
Event对象应用---鼠标事件和键盘事件
代码(oEvent.target||oEvent.srcElement).id.逻辑或操作于两个对象时,第一个对象非空 返回第一个对象,否则返回第二个对象.
这样可以用它来判断哪个属性保存了事件目标,以便获取id特性.
Code<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type;
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;
oTextbox.value += "\n at (" + oEvent.clientX + "," + oEvent.clientY + ") in the client";
oTextbox.value += "\n at (" + oEvent.screenX + "," + oEvent.screenY + ") on the screen";
oTextbox.value += "\n button down is " + oEvent.button;
var arrKeys = [];
if (oEvent.shiftKey) {
arrKeys.push("Shift");
}
if (oEvent.ctrlKey) {
arrKeys.push("Ctrl");
}
if (oEvent.altKey) {
arrKeys.push("Alt");
}
oTextbox.value += "\n keys down are " + arrKeys;
}
</script>
</head>
<body>
<p>Use your mouse to click and double click the red square.</p>
<div style="width: 100px; height: 100px; background-color: red"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1"></div>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
在IE中
fromElement属性包含鼠标指针来自的元素 toElement包含鼠标指针去往的元素
Code//鼠标事件
<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type;
oTextbox.value += "\n target is " + oEvent.srcElement.tagName;
if (oEvent.fromElement) {
oTextbox.value += "\n fromElement is " + oEvent.fromElement.tagName;
}
if (oEvent.toElement) {
oTextbox.value += "\n toElement is " + oEvent.toElement.tagName;
}
}
</script>
</head>
<body>
<p>Use your mouse to click and double click the red square.</p>
<div style="width: 100px; height: 100px; background-color: red"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1"></div>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
在DOM 中 DOM 对mouseover和mouseout只支持一个event属性relatedTarget.在mouseover事件中,relatedTarget
指出鼠标指针来自何处,在mouseout事件中,relatedTarget指出鼠标指针去往何方.
Code<html>
<head>
<title>Mouse Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type;
oTextbox.value += "\n target is " + oEvent.target.tagName;
oTextbox.value += "\n relatedTarget is " + oEvent.relatedTarget.tagName;
}
</script>
</head>
<body>
<p>Use your mouse to click and double click the red square.</p>
<div style="width: 100px; height: 100px; background-color: red"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1"></div>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
//键盘事件
Code<html>
<head>
<title>Key Events Example</title>
<script type="text/javascript">
function handleEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += "\n>" + oEvent.type;
oTextbox.value += "\n target is " + (oEvent.target || oEvent.srcElement).id;
oTextbox.value += "\n keyCode is " + oEvent.keyCode;
oTextbox.value += "\n charCode is " + oEvent.charCode;
var arrKeys = [];
if (oEvent.shiftKey) {
arrKeys.push("Shift");
}
if (oEvent.ctrlKey) {
arrKeys.push("Ctrl");
}
if (oEvent.altKey) {
arrKeys.push("Alt");
}
oTextbox.value += "\n keys down are " + arrKeys;
}
</script>
</head>
<body>
<p>Type some characters into the first textbox.</p>
<p><textarea id="txtInput" rows="15" cols="50"
onkeydown="handleEvent(event)"
onkeyup="handleEvent(event)"
onkeypress="handleEvent(event)"></textarea></p>
<p><textarea id="txt1" rows="15" cols="50"></textarea></p>
</body>
</html>
顺序
1.用户按一次某字符按键时,会按以下顺序发生
1) keydown
2) keypress //keypress事件是在文本插入到文本框之前触发的
3)keyup
2.用户按一次某非字符按键时,会按以下顺序发生
1) keydown 2) keyup
当用户按下一个字符键不放时 ,keydown和keypress事件将逐个持续触发,直到松开键
当用户按下一个非字符键不放时 ,keydown事件将逐个持续触发,直到松开键
