二十五岁时我们都一样愚蠢、多愁善感,喜欢故弄玄虚,可如果不那样的话,五十岁时也就不会如此明智。
标题:JavaScript htmldom 事件
响应事件
JavaScript可以在事件发生时被执行,例如,当用户点击一个HTML元素.
当用户点击一个元素时,执行代码,添加JavaScript代码到HTML事件属性:
onclick=JavaScript事件实例:
- 当用户单击鼠标时
- 当网页加载完毕
- 当图像加载完毕
- 当鼠标移动到一个元素上
- 当输入字段被修改
- 当一个HTML表单被提交
- 当用户按下一个按键
在这个实例中, 当用户点击它时,修改
<h1>
的内容:<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1> </body> </html>在本例中,从事件处理程序调用函数:
<!DOCTYPE html> <html> <body> <h1 onclick="changeText(this)">Click on this text!</h1> <script> function changeText(id) { id.innerHTML = "Ooops!"; } </script> </body> </html>
HTML 事件属性
分配事件到HTML,你可以使用元素的事件属性.
<button onclick="displayDate()">Try it</button>在上面的实例中, 当点击按钮时displayDate函数将执行.
使用HTML DOM分配事件
HTML DOM 允许你使用JavaScript分配事件到HTML元素:
<script> document.getElementById("myBtn").onclick = displayDate; </script>在上面的实例中, 一个名称为displayDate的函数分配到id="myBtn"的元素上.
当点击按钮时,该函数将被执行.
onload 和 onunload 事件
当用户进入或者离开页面时,onload和onunload事件被触发。
onload事件可以用来查看访问者的浏览器类型和版本,基于这些信息的加载适当的版本。
onload和onUnload事件可以用来处理cookies.
<body onload="checkCookies()">
onchange 事件
onchange事件通常与输入字段验证组合使用.
下面例子,演示如何使用onchange事件. 当用户修改输入框内容时 upperCase() 函数将被调用.
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
当用户将鼠标放置在,或离开,一个HTML元素时,触发onmouseover和onmouseout事件。
Mouse Over Me
onmousedown, onmouseup 和 onclick 事件
onmousedown, onmouseup和onclick 事件是鼠标点击事件的一部分. 首先单击鼠标按钮, 事件被触发, 然后,当鼠标按钮被释放, onmouseup 事件被触发, 最好, 当鼠标点击完成时, onclick事件被触发.
Thank You
更多实例
当用户按住鼠标按钮时更改图像.
页面加载完毕时显示警告框.
当输入框获得焦点时,修改背景颜色.
光标移动时更改元素的颜色.