JavaScript 事件总结

1.Javascript事件的一个知识点总结，事件它指的是文档或则浏览器窗口中发生的一些特定的交互瞬间，那么JavaScript与HTML它们之间的交互式是通过一个事件去实现的。对于Web应用来讲，有这些代表性的事件：单机事件，鼠标移入移出事件，键盘按下时/弹起事件等等。
(1)这里写了一个CSS样式，button按钮和一个button的点击事件，在浏览器里点击按钮就会触发一个事件，弹出一个提示框。然后console.log(btn)，输出的结果是是按钮这里就是已经获取到它了。检测输出结果为object对象.

2.onload页面加载事件：
浏览器在加载一个页面时，是按照自上而下的顺序加载的读取到一行的时候就会运行一行，如果script标签写在上面，在执行代码时，页面没有加载。
(1)onload事件会在整个页面加载完成之后会触发，为window绑定一个onload事件。示列：
在浏览器运行点击按钮，并弹出一个提示框。

(2)输出结果：

3.Event事件对象：
(1)当事件的函数被触发时，浏览器每次都会将一个事件对象，作为一个实参来传递，传递进响应函数，在事件对象中去封装当前事件相关的一切信息，比如：鼠标的坐标，键盘按键被按下时，鼠标滚轮滚动的某个方向。
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存。
用IE8浏览器运行，响应函数被触发时，他不会去传递事件对象。
(2 )clientX 获取鼠标指针的水平坐标
clientY 获取鼠标指针的垂直坐标
clientX和clientY 用于获取鼠标当前可见窗口的坐标，div的偏移量是相对于整个网页的。
写法：Var left=event.clientX; var top=event.clientY;
(3)pageX和pageY是用于获取鼠标相对于当前页面的坐标，这个属性在IE8中并不兼容，如果需要兼容IE8不要去使用。
写法：var left=event.pageX； var top=event.pageY;

2.事件冒泡：
所谓冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发过程中大部分情况冒泡都是有用的，如果不希望冒泡发生可以去通过事件对象去取消冒泡，写法：event.cancelBubble=true;

4.事件的委派
将事件统一绑定给元素共同的祖先元素，当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件，时间的委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能，事件对象属性为target:返回触发此事件的元素（事件的目标节点）

5.事件的绑定：
(1)通过addEventListener方法可以为元素绑定响应函数，它可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行，这个方法不支持IE8及以下浏览器。
(2)参数：
时间的字符串，不加on
回调函数，事件被触发时该函数会被调用
是否在捕获阶段触发事件，需要一个布尔值，一般都传false，示列：
提示框里返回的第一个是1.第二个是2

(3)对象attachEvent有on的事件名字，事件处理函数；它可以绑定多个事件，谷歌和火狐不支持，IE8支持。

6.事件的传播：
(1). 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
(2). 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。