JavaScript HTML DOM事件

事件模型的基本概念

当浏览器，窗口，document，HTML元素上发生某些事时，Web浏览器会对外生成Event对象——这就是事件。事件极可能来自用户的行为，也可能来自JS对象自身。

事件类型（event type）

1. 表单事件（如submit ，click，focus等事件）
2. 窗口时间（如load，unload等事件）
3. 鼠标事件（如click，dbclick，mousedown，mousemove等事件）
4. 键盘事件（如keydown，keypress，keyup事件）
5. 文档事件（如load事件）
6. media事件

事件目标（event target）

引发事件的对象，如窗口，document，HTML元素等。DOM事件模型中的事件对象可通过target属性访问事件源（时间目标），一般提到事件时，要同时说明时间目标和事件类型，如window对象的load事件，button对象的click事件。

事件event（）

当浏览器，窗口，document，HTML元素上发生某些事时，Web浏览器对外生成的对象，该对象中封装了所发生事件的详细信息，通常至少包括type和target两个属性。

事件处理器（event handler）或事件监听器（event listener）

代表用于处理或响应事件的js函数，也被称为事件处理函数

触发

当浏览器，窗口，document，HTML元素上发生某些事时，Web浏览器会对外生成Event对象，注册在浏览器，窗口，document，HTML元素上的时间处理区（函数）被自动执行，这个过程被称为触发.
我们可以在事件发生时执行 JavaScript

HTML事件的例子：

当用户点击鼠标时

当网页已加载时

当图像已加载时

当鼠标移动到元素上时

当输入字段被改变时

当提交 HTML 表单时

当用户触发按键时

---

分配事件的两种方法

方法一：绑定HTML元素属性，示例：

//向button元素分配onclick事件
<button onclick="displayDate()">点击这里</button>

这个方法简单易用，但是需要直接修改HTML元素属性，增加了页面逻辑的复杂度，同时不利于团队协作开发。

方法二：绑定JS对象属性，示例：

//同样向向button元素分配onclick事件
<button id="myBtn">点击这里</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>