JavaScript中DOM操作之事件介绍

DOM - 事件是什么？

 JavaScript 对 HTML 事件作出反应。

对事件作出反应即当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中。

例如：当用户点击鼠标时

本例中，当用户点击时，会改变

元素的内容。

将代码运行·

点击后

事件绑定的三要素 

1. 事件源

2. 事件类型

3. 事件处理函数 

语法：

事件源.on事件类型 = 事件处理函数或事件源.addEventListener(事件类型，事件处理函数)  

各种事件简单介绍

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

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

onchange 事件

onchange 事件常用于输入字段的验证。

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

坐标信息 

1. offsetX 和 offsetY（相对于触发事件的元素）

2. clientX 和 clientY （相对于浏览器可视窗口）

3. pageX 和 pageY  （相对于页面文档流 ）