JavaScript添加事件的总结
Posted javinzon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript添加事件的总结相关的知识，希望对你有一定的参考价值。
详细参考链接：http://www.w3school.com.cn/js/js_htmldom_events.asp
javascript HTML DOM事件的写法：
直接在元素上进行操作（给<h1>元素上添加点击事件，改变其内容）
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
通过事件处理器调用函数
<head>
<script>
function changetext(id) { id.innerHTML="谢谢!"; } </script>
<head>
...
<h1 onclick ="changetext(this)">点击该文本</h1>
...
使用事件属性，向HTML元素分配事件
<button onclick="displayDate()">点击这里</button>
使用HTML DOM来分配事件
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
常见的事件：
onload和onunload事件：
- 触发条件：用户进入或者离开页面时被触发。
- 应用场景举例：用于处理cookie，页面加载完成时显示一个提示框之类的
onchange事件：
- 触发条件：当用户改变输入字段的内容时
- 应用场景举例：结合对输入字段的验证来使用
onmouseover和onmouseout事件：
- 触发条件:当用户的鼠标移至HTML元素上方或者移出元素时
- 应用场景举例：当鼠标移动或者移出某个元素时，可以改变颜色、文字样式或者做些其他事件等
onmousedown、onmouseup以及onclick事件：
说明：构成了鼠标点击事件的所有部分。
- onmousedown:按下鼠标时
- onmouseup:松开鼠标时
- 以上完成后，完成了鼠标的点击事件，触发onclick事件
onfocus事件：
- 触发条件：当输入字段获得焦点时
- 应用场景举例：元素获得焦点时，可以改变背景色等等之类的操作
以上是关于JavaScript添加事件的总结的主要内容，如果未能解决你的问题，请参考以下文章