JavaScript HTML DOM 事件
对事件作出反应
javascript 能够在事件发生时执行,比如当用户点击某个 html 元素时。
为了在用户点击元素时执行代码,请向 html 事件属性添加 javascript 代码:
onclick=javascript
html 事件的例子:
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 html 表单被提交时
- 当用户敲击按键时
在本例中,当用户点击 <h1> 时,会改变其内容:
实例
<!doctype html> <html> <body> <h1 onclick="this.innerhtml = 'hello!'">点击此文本!</h1> </body>
</html>
在本例中,从事件处理程序调用函数:
实例
<!doctype html> <html> <body> <h1 onclick="changetext(this)">点击此文本!</h1> <script> function changetext(id) { id.innerhtml = "hello:)"; } </script> </body> </html>
html 事件属性
如需向 html 元素分配事件,您能够使用事件属性。
实例
向 button 元素分配 onclick 事件:
<button onclick="displaydate()">试一试</button>
在上例中,名为 displaydate 的函数会在按钮被点击时执行。
使用 html dom 分配事件
html dom 允许您使用 javascript 向 html 元素分配事件:
实例
为 button 元素指定 onclick 事件:
<script> document.getelementbyid("mybtn").onclick = displaydate; </script>
在上例中,名为 displaydate 的函数被分配到 id="mybtn" 的 html 元素。
当点击按钮时将执行函数。
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 元素上或移出时触发某个函数:
上一篇: 读完此文让你了解各个queue的原理
下一篇: PHP攻击网站防御代码-以及攻击代码反译
推荐阅读