您的位置：首页 > Web前端 > JavaScript

奋斗30天Javascript之DOM事件模型（Part27）

2019-04-17 13:32 351 查看

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 中:

[code]<element ondblclick="SomeJavaScriptCode">

JavaScript 中:

[code]object.ondblclick=function(){SomeJavaScriptCode};

參數：

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

onmousedown 事件

定义和用法

onmousedown 事件会在鼠标按键被按下时发生。

提示： 与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：

onmousedown

onmouseup

onclick

与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

onmousedown

onmouseup

oncontextmenu

语法

在 HTML 中:

[code]<element onmousedown="SomeJavaScriptCode">

在 JavaScript 中:

[code]object.onmousedown=function(){SomeJavaScriptCode};

參數：

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

onmousedown 属性适用于所有 HTMl 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

栗子：

弹出用户点击的元素

[code]<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() 方法。

栗子：

[code]<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 的區別。

[code]<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 中:

[code]<element onkeydown="SomeJavaScriptCode">

JavaScript 中:

[code]object.onkeydown=function(){SomeJavaScriptCode};

參數：

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

onkeydown 属性可用于所有的 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

栗子：

[code]<p>当你在输入框内按下一个按键是函数被触发</p>
<input type="text" onkeydown="myFunction()">
<script>
function myFunction(){
alert("你在输入栏内按下一个键");
}
</script>

結果:

onkeyup 事件

定义和用法

onkeyup 事件会在键盘按键被松开时发生。

提示：与onkeyup 事件相关的事件发生次序：

onkeydown

onkeypress

onkeyup

语法

HTML 中:

[code]<element onkeyup="SomeJavaScriptCode">

JavaScript 中:

[code]object.onkeyup=function(){SomeJavaScriptCode};

參數：

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

栗子：輸出的字母小寫變成大寫字母

[code]<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 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口。

语法

[code]event.clientX

栗子：

[code] <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 属性来解决:

[code]var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

提示： 所有 Unicode 字符列表可查看我们的完整 Unicode 参考手册。

提示： 如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。

注意： 该属性是只读的。

注意： which 和 keyCode 属性提供了解决浏览器的兼容性的方法，最新版本的 DOM 事件推荐使用 key 属性来替代该方法。

提示： 如果你想查看是否按下了 "ALT", "CTRL", "META" 或 "SHIFT" 键，可使用 altKey, ctrlKey, metaKey 或 shiftKey 属性。

栗子：

[code]    <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 属性。

语法

[code]event.key

參數

返回值：	字符串，表示按键按钮。可能值：单个字母 (如 "a", "W", "4", "+" 或 "$") 多个字 1b023 母 (如 "F1", "Enter", "HOME" 或 "CAPS LOCK") 注意： Chrome，Safari 和 Opera浏览器返回 undefined
DOM 版本:	DOM Level 3 Events

栗子：

[code]    <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鍵

栗子二：

[code]    <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 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

语法

[code]event.screenX

栗子：

[code]<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>

結果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航