JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄
- 事件是某个行为或者触发，比如点击、鼠标移动
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当用户触发按键时...
事件流
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型
IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
这种分歧在日常生活中也很常见，举个例子，某个地方出了抢劫事件，我们有多种处理方式
村里先发现，报告给乡里，乡里报告到县城，县城报告给市里。。。。
市里先知道这事儿，然后交代给县城怎么处理，县城交给到乡里处理，乡里交给村里处理
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
如有以下html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<div>
Click Here</div>
</body>
</html>
事件冒泡
示例:
点击hello，浏览器依次处理hello，box，container。
事件捕获
示例：
同样点击hello，浏览器依次处理container,box,hello
事件捕获与冒泡操作
事件处理程序
我们也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器
也就是我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序，了解了这些，我们看看如何给元素添加事件处理程序
HTML内联方式
元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JavaScript代码，我们可以为一个button添加click事件处理程序
<input type="button" value="Click Here" onclick="alert('Clicked!');" /> //不常用
在HTML事件处理程序中可以包含要执行的具体动作，也可以调用在页面其它地方定义的脚本,刚才的例子可以写成这样
<input type="button" value="Click Here" onclick="showMessage();" />
在HTML中指定事件处理程序书写很方便，但是有两个缺点。
-
存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题
-
这样书写html代码和JavaScript代码紧密耦合，维护不方便
JavaScript指定事件处理程序
通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。
每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序，如下
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id); //this代表当前元素btnClick
};
</script>
这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick
这样还有一个好处，我们可以删除事件处理程序，只需把元素的onclick属性赋为null即可
js制定事件处理多次使用只执行最后的事件，如下：
上图链接
DOM2事件处理程序
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
-
addEventListener
-
removeEventListener
所有的DOM节点都包含这两个方法，并且它们都接受三个参数： -
事件类型
-
事件处理方法
-
布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
刚才的例子我们可以这样写
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
</script>
网友评论