DOM学习总结（五）DOM中的事件

 什么是DOM事件？

事件就是当触发这个事件之后会执行一段代码
使用 on 来绑定一个事件
比如：<div onclick="hj()"></div>

常见事件：
1.当鼠标点击某个元素时/或者移动到当前元素上时
2.页面加载时
3.改变输入字段时
4.当HTML表单被提交时
5.当用户触发键盘上的某个按键时

当按钮被点击时改变body的背景颜色

//这里可以运用在给用户自己选择当前浏览的网页的背景颜色
<input type="button" onclick="document.body.style.backgroundColor='lavender';" /> 
//所触发的事件可以先声明好，需要使用的时候直接用函数名调用

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" />

 

1.HTML 事件属性

如果想给一个HTML元素分配一个事件有两种方法：

1.可以直接在HTML的属性中声明
比如：
<button onclick="displayDate()">西门吹雪</button> //声明的一个点击事件

2.通过DOM来声明
比如：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
//    找到这个元素的 id名，绑定一个点击事件
</script>

常用的事件：

1.onload事件 和 onunload事件 //用于监听用户进入或离开网页

onload事件可用于检查访问者的浏览器的类型和版本，以便于相对应的加载不同版本的网页，提高用户体验

2.onchange 事件

onchange 事件常用于输入字段的验证
就是当你在输入框中输入数据，回车之后会触发的事件    

3.onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件用于在鼠标移动到当前或离开元素时触发编写好的函数

比如：
鼠标移进DIV内容区域的时候显示欢迎光临，离开后显示谢谢惠顾

<div onmouseover="mOver(this)" onmouseout="mOut(this)">熊削铁如泥</div>

<script>
function mOver(obj)
{    
obj.innerHTML="欢迎光临"
}

function mOut(obj)
{
obj.innerHTML="谢谢惠顾"
}
</script>

4.onmousedown、onmouseup 以及 onclick 事件
//onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程
//1.元素被点击的一瞬间，触发 onmousedown 事件
//2.当元素被松开的一瞬间，触发 onmouseup 事件
//3.鼠标点击完成时，触发 onclick 事件。