JavaScript HTML DOM 事件_JSHTMLDOM


JavaScript HTML DOM 事件


HTML DOM 准许 JavaScript 对 HTML 事件作出反应。

示例代码

把鼠标放过来
点击一下



一、对事件做出反应

我们可以在 JavaScript 事件发生时执行,比如当用户点击 HTML 元素。

时执行代码时为了在用户点击元素,准请一个 HTML 事件属性添加 JavaScript 代码

onclick=JavaScript

HTML 事件的例子:

  • 当用户使用鼠标点击

  • 当已加载的网页

  • 当已加载的图像

  • 当鼠标挪动到元素上时

  • 当输入字段被变更时

  • HTML 提交表单时

  • 当用户引发按键时

在本例中,当用户点击 <h1> 时的时候,会改变其内容:

示例代码

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击我的文本!</h1>
</body>
</html>

演示一下 ?

本事件处理器调用一个函数:

示例代码

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击我的文本!</h1>
</body>
</html>

演示一下 ?



二、HTML 事件属性

俨然向 HTML 元素分配事件,您或许使用事件属性。

示例代码

向 button 元素分配 onclick 事件:

<button onclick="displayDate()">点击我这里</button>

演示一下 ?

上面这个例中,名为 displayDate 的函数,按钮被点击时执行。


三、使用 HTML DOM 事件的分配

HTML DOM 允许您使用 JavaScript 指向 HTML 元素分配事件:

示例代码

向 button 元素规定 onclick 事件:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

演示一下 ?

在这上面例中,名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素

点击Javascript按钮将执行函数。


四、onload 和 onunload 事件

触发 onload 和 onunload 事件,需要用户进入后及离开页面时执行。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,然而基于信息加载网页的准确版本。

onload 和 onunload 事件可用于处理 cookie。

示例代码

<body onload="checkCookies()">

演示一下 ?



五、onchange 事件

onchange 事件经常和输入字段验证结合的使用。

下面是一个如何使用 onchange 的例子。当用在户改变输入字段内容时,会调用 upperCase() 函数。

示例代码

<input type="text" id="fname" onchange="upperCase()">

演示一下 ?



六、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移走时触发某个函数。

示例代码

一个 onmouseover-onmouseout 示例代码,很简单:

Mouse Over Me

演示一下 ?



七、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 形成鼠标点击事件的全部部分。最初点击鼠标按钮时, onmousedown 事件会触发,当鼠标点击时,会触发 onmouseup 事件,最后,最后当点击完成鼠标时, onclick 事件会触发。

示例代码

一个 onmousedown-onmouseup 示例代码:

Thank You

演示一下


八、更多JavaScript HTML DOM 事件示例代码

onmousedown 和onmouseup
当用户按下鼠标按钮时,改变成一幅图像。

onload
onload 当页面打开时显示报警框。

onfocus
输入文字段点击获得焦点时,背景色会变。

鼠标事件
把鼠标放在文字上面,会改变文字颜色。


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16