JavaScript事件总结

JavaScript事件总结

作者：肖骏平
撰写时间：2020年4月28日

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间

JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说，，有下面这些代表性的事件：单机事件、鼠标移入移出事件、键盘
按下/弹起事件等等

事件就是用户与浏览器的交互行为

加载：
浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行的时候就运行一
行，如果将script标签写在上面，在执行代码时，页面还没有加载

onmouseomove事件：
该事件将会在鼠标在元素中移动是被触发事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递，传递进行
响应函数，在事件对象中封装了当前事件相关的一切信息 比如：鼠标的坐标 键盘
那个按键被按下，鼠标滚轮滚动的方向。

Client：
可以获取鼠标指针的坐标
Client X 可以获取鼠标的水平坐标
Client Y 可以获取鼠标的垂直坐标

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

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

事件的绑定：
使用、对象、事件=函数形式绑定事件
它只能同时为同一个元素绑定同一事件一次，不能绑定多次，如果绑定多次，后面
的会覆盖掉前面的

addEventListener（）：
	通过这个方法也可以为元素绑定事件响应函数
	参数：

1. 事件的字符串，不见on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false使用addEventListener（）可以同时为一个元素的相同事件绑定多个响应函数

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行这个方法不支持IE8及3以下的浏览器

attachEvent（）
		在IE8中可以使用attachEvent（）来绑定事件
		参数：

1. 事件的字符串，要on
2. 回调函数，这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener（）相反

事件的传播：

	关于事件的传播网景公司和微软公司有不同的理解

	微软公司认为事件应该是由內向外传播，也就是当事件触发时，应该先触发当

前元素上的事件，然后再向当前元素的祖先元素上传播，也就是说事件应该在
冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触
发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段

1. 捕获阶段
   在捕获阶段是从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

2. 目标阶段
   事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3. 冒泡阶段
   事件从目标元素向他的祖先元素传递，依次触发元素上的事件

   如果希望在捕获阶段触发事件，可以将addEventListener（）的第三个参数设置为true
   一般情况之下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
   IE8及以下的浏览器中没有捕获阶段