JavaScript HTML DOM事件和事件监听
什么是事件句柄?
当事件发生时，系统会自动查询该事件是否指定了事件处理函数，若指定了，则调用执行对应的事件处理函
数，从而完成对事件的响应，若未指
定，则什么也不做。事件处理函数
通过对象的事件句柄来指定，事件句柄可视为对象的一个属性，事件句柄的名称由on事件名构成，比如Click事件，其对应的事件句柄名就是 OnClick事件。事件处理函数的指定方法为：事件句柄=事件处理函数或语句集。
对事件做出反应
可以在发生事件时执行JavaScript，比如在Html元素上奠基石。
如需要在用户点击某个元素时执行代码，需要向一个HTML事件属性添加JavaScript代码：
onclick=":javascript";
<script>
function changtext(id){
id.innerHTML="Ooops!";
};
</script>
<body>
<h1 onclick="changetext(this)">点击文本</h1> //使用this关键字
</body>
html事件的常见例子
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交HTML表单时
- 当用户触发按键时
HTML分配事件
当button元素分配onclick事件：
<script> document.getElementById("myBtn").onclick=function(){displayData()};</script>
在上面的例子中，名为displayData的函数会被分配给id="myBtn"HTML元素
按钮点击时Javascript函数会被执行
onload和onunload
onload和onunload会在用户进入或离开页面时被触发。
onload事件可用于监测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
onload和onunload可用来处理cookies.
实例
<body onload="checkCookies()">
onchange事件
当元素的值发生改变时，会发生 onchange 事件。
对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。
提示：该事件类似于 oninput 事件。不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 元素。
onmouseover和onmouseout事件
onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时。
提示：此事件通常与 onmouseout 事件一起使用，当用户将鼠标指针移出元素时会发生该事件。
例子：
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
onmousedown
当用户在元素上按下鼠标按钮时，会发生 onmousedown 事件。
提示：与 onmousedown 事件相关的事件顺序（针对鼠标左键/中键）：
- onmousedown
- onmouseup
- onclick
与 onmousedown 事件相关的事件顺序（对于鼠标右键）：
- onmousedown
- onmouseup
- oncontextmenu
EventLisrener事件监听
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
addEventListener() 方法将事件处理程序附加到元素。
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
例子（向
