奋斗30天Javascript之DOM事件模型(Part27)
HTML DOM 事件
鼠标事件
属性 | 描述 | DOM |
---|---|---|
onclick | 当用户点击某个对象时调用的事件句柄。 | 2 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 | |
ondblclick | 当用户双击某个对象时调用的事件句柄。 | 2 |
onmousedown | 鼠标按钮被按下。 | 2 |
onmouseenter | 当鼠标指针移动到元素上时触发。 | 2 |
onmouseleave | 当鼠标指针移出元素时触发 | 2 |
onmousemove | 鼠标被移动。 | 2 |
onmouseover | 鼠标移到某元素之上。 | 2 |
onmouseout | 鼠标从某元素移开。 | 2 |
onmouseup | 鼠标按键被松开。 |
oncontextmenu 事件
语法
HTML 中:
<element oncontextmenu="myScript">尝试一下
JavaScript 中:
object.oncontextmenu=function(){myScript};尝试一下
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("contextmenu", myScript);尝试一下
注意: Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener() 。
ondblclick事件
语法
HTML 中:
<element ondblclick="SomeJavaScriptCode">
JavaScript 中:
object.ondblclick=function(){SomeJavaScriptCode};
參數:
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
onmousedown 事件
定义和用法
onmousedown 事件会在鼠标按键被按下时发生。
提示: 与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮):
- onmousedown
- onmouseup
- onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
- onmousedown
- onmouseup
- oncontextmenu
语法
在 HTML 中:
<element onmousedown="SomeJavaScriptCode">
在 JavaScript 中:
object.onmousedown=function(){SomeJavaScriptCode};
參數:
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
onmousedown 属性适用于所有 HTMl 元素,除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
栗子:
<body onmousedown="whichElement(event)">
<p>这是一个段落</p><br/>
<b>这是一个加粗段落</b><br/>
<i>这是一个斜段落</i><br/>
<button type='button'>这是一个按鈕</button>
</body>
<script>
function whichElement(e){
var targ;
if (!e){
var e=window.event;
}if (e.target){
targ=e.target;
}else if (e.srcElement){
targ=e.srcElement;
}
var tname;
tname=targ.tagName;
alert("你点击了一个" + tname + " 元素。");
}
</script>
結果:當我點擊button,則彈出。
onmouseenter 事件
定义和用法
onmouseenter 事件在鼠标指针移动到元素上时触发。
提示: 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
提示: onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。
语法
HTML 中:
<element onmouseenter="myScript">尝试一下
JavaScript 中:
object.onmouseenter=function(){myScript};尝试一下
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("mouseenter", myScript);尝试一下
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
栗子:
<p>该实例演示了如何向 h1 元素添加 "onmouseenter" 和 "onmouseleave" 事件。</p>
<h1 id="demo" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">鼠标移到我这</h1>
<script>
function mouseEnter() {
document.getElementById("demo").style.color = "red";
}
function mouseLeave() {
document.getElementById("demo").style.color = "black";
}
</script>
鼠標移到文字:則變成紅色,鼠標移開則變成黑色
onmousemove, onmouseenter 和 onmouseover 的區別。
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>
</div>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter: <br> <span id="demo2">鼠标移动到我这!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p>onmouseover: <br> <span id="demo3">鼠标移动到我这!</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
document.getElementById("demo").innerHTML = z+=1;
}
function myEnterFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}
function myOverFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
結果為:
說明:
onmousemove為進入div后觸發事件只要鼠標在裡面動就會一直觸發這個事件,onmouseenter 為進入了div后觸發,這個是鼠標一出一進時觸發,只要進div后鼠標怎麼動都不會觸發,它是重新進入后才出發事件。onmouseover 是移動到div時觸發一次,移動到p后觸發一次,移動到span後觸發一次。
键盘事件
属性 | 描述 | DOM |
---|---|---|
onkeydown | 某个键盘按键被按下。 | 2 |
onkeypress | 某个键盘按键被按下并松开。 | 2 |
onkeyup | 某个键盘按键被松开。 |
onkeydown 事件
定义和用法
onkeydown 事件会在用户按下一个键盘按键时发生。
提示: 与 onkeydown 事件相关联的事件触发次序:
- onkeydown
- onkeypress
- onkeyup
语法
HTML 中:
<element onkeydown="SomeJavaScriptCode">
JavaScript 中:
object.onkeydown=function(){SomeJavaScriptCode};
參數:
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
onkeydown 属性可用于所有的 HTML 元素,除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
栗子:
<p>当你在输入框内按下一个按键是函数被触发</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction(){
alert("你在输入栏内按下一个键");
}
</script>
結果:
onkeyup 事件
定义和用法
onkeyup 事件会在键盘按键被松开时发生。
提示:与onkeyup 事件相关的事件发生次序:
- onkeydown
- onkeypress
- onkeyup
语法
HTML 中:
<element onkeyup="SomeJavaScriptCode">
JavaScript 中:
object.onkeyup=function(){SomeJavaScriptCode};
參數:
参数 | 描述 |
---|---|
SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
栗子: 輸出的字母小寫變成大寫字母
<p>当用户在输入字段释放一个按键时触发函数。函数将字符转换为大写。</p>
输入你的名称: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
鼠标/键盘事件对象
属性
属性 | 描述 | DOM |
---|---|---|
altKey | 返回当事件被触发时,"ALT" 是否被按下。 | 2 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 | 2 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 | 2 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 | 2 |
ctrlKey | 返回当事件被触发时,"CTRL" 键是否被按下。 | 2 |
Location | 返回按键在设备上的位置 | 3 |
charCode | 返回onkeypress事件触发键值的字母代码。 | 2 |
key | 在按下按键时返回按键的标识符。 | 3 |
keyCode | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
which | 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 | 2 |
metaKey | 返回当事件被触发时,"meta" 键是否被按下。 | 2 |
relatedTarget | 返回与事件的目标节点相关的节点。 | 2 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 | 2 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 | 2 |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 | 2 |
clientX 事件属性
定义和用法
clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标。
客户区指的是当前窗口。
语法
event.clientX
栗子:
<style>
body,
html {
padding: 0;
margin: 0;
}
</style>
<div onmousedown="show_coords(event)" style="border:1px solid #F69;height:400px;">点击这一行。一个消息框会提示出鼠标指针的 x 和 y 坐标。</div>
<script>
function show_coords(event){
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
結果為:
keyCode 事件属性
定义和使用
keyCode 属性返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。
两种代码类型的区别是:
- 字符代码 - 表示 ASCII 字符的数字
- 键盘代码 - 表示键盘上真实键的数字
p>两种类型的值不是都相等的,例如小写字符 "w" 和大写字符 "W" 有相同的键盘代码,因为他们他们键盘上 ( "W" 代码为 "87"),但是它们有不同的字符代码,两个字符输出是不一样的( "w" 和 "W" 字符代码为 "119" 和 "87") - 查看以下实例可以更好的理解。
提示: 如果需要知道用户按下的是打印键 (如 "a" 或 "5"),建议使用 onkeypress 事件。如果需要知道用户按下的是功能键(如 "F1", "CAPS LOCK" 或 "Home") 可使用 onkeydown 或 onkeyup 事件。
注意: 在 Firefox 中,, keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题,可以一起使用 which 和 keyCode 属性来解决:
var x = event.which || event.keyCode; // 使用 which 或 keyCode, 这样可支持不同浏览器
提示: 所有 Unicode 字符列表可查看我们的 完整 Unicode 参考手册。
提示: 如果你需要将 Unicode 值转换为字符,可以使用 fromCharCode() 方法。
注意: 该属性是只读的。
注意: which 和 keyCode 属性提供了解决浏览器的兼容性的方法,最新版本的 DOM 事件推荐使用 key 属性来替代该方法。
提示: 如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键,可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
栗子:
<p>在输入框中按下键盘上的按键获取字符和数字。 </p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.keyCode; // 获取 Unicode 值
var y = String.fromCharCode(x); // 将值转换为字符
document.getElementById("demo").innerHTML = "数字: " + x + " = 字符: " + y;
}
</script>
結果:
key 事件属性
定义和使用
key 事件在按下按键时返回按键的标识符。
按键标识符是表示键盘按钮的字符串,该属性的返回值可以是:
- 单个字母 (如 "a", "W", "4", "+" 或 "$")
- 多个字母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK")
提示: 如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键,可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。
语法
event.key
參數
返回值: | 字符串,表示按键按钮。 可能值:
|
---|---|
DOM 版本: | DOM Level 3 Events |
栗子:
<p>在输入框中按下任意按钮按键。</p>
<input type="text" size="40" onkeydown="myFunction(event)">
<p id="demo"></p>
<p><strong>注意:</strong> 目前只有 Firefox ,IE9及以上版本支持 key 属性。</p>
<script>
function myFunction(event) {
var x = event.key;
document.getElementById("demo").innerHTML = "按键为: " + x;
}
</script>
結果:我按下了enter鍵
栗子二:
<p>在用户按下 "enter" 键时弹出提示信息。</p>
<input type="text" size="40" onkeydown="myFunction(event)">
<p><strong>注意:</strong> 目前只有 Firefox ,IE9及以上版本支持 key 属性。</p>
<script>
function myFunction(event) {
var x = event.key;
var xcode = event.keyCode;
// 按下 "a" 或 "A" 键 (使用 caps lock 或 shift),弹出提示信息
if (xcode == "13" || x == "Enter") {
alert ("你按下了 'Enter' 键!");
}
}
</script>
結果:
screenX 事件属性
定义和用法
screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。
语法
event.screenX
栗子:
<body onmousedown="coordinates(event)" style="width:500px;height:300px;border:1px solid #000">
<p style="width:200px;border:1px solid #F69">
在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。
</p>
<script type="text/javascript">
function coordinates(event){
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
結果: