【前端攻城师之JS基础】10事件对象

1.事件对象

当事件被触发时，浏览器会调用响应函数，同时将一个事件对象作为实参传递给响应函数

在事件对象中封装了当前事件相关的一切信息，包括鼠标的坐标，哪个按键被按下，鼠标滚轮滚的方向等

• 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做实参传递，而是作为window对象的属性保存，以下方法兼容IE8和其他浏览器

  元素.事件 = function(event){
  event = event || window.event;
  };

  元素.事件 = function(e){
  e = e || event;

  };

clientX和clientY属性指的是鼠标相对可视区域的水平坐标和垂直坐标

pageX和pageY属性指的是鼠标相对整个页面文档的水平坐标和垂直坐标，但IE8不兼容pageX和pageY属性

2.事件的冒泡和委派

• 事件的冒泡指的是，事件的向上传导，当触发了后代元素的事件，它的祖先元素的相同事件也会被触发。

• 事件的委派 指的是，当后代元素触发事件后，将事件委派给它们共同的祖先元素进行处理， 这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

  事件委派利用了冒泡的原理，通过委派可以减少事件绑定次数，提高程序的性能。

3.事件的绑定

• 如果使用对象名.事件=回调函数的方式绑定事件，只能为一个对象的一个事件绑定一个函数，如果绑定了多个函数，则后面的会覆盖前面的,使用此方法绑定事件，如果要取消浏览器的默认行为
  return false即可

• 那如果我们想要为一个对象的一个事件绑定多个函数，就要使用另一种绑定方式addEventListener( )

通过这种方法也能为元素绑定响应函数

参数分别是：

1.事件的字符串名字 不要on onclick----->click

​ 2.回调函数，当事件触发时该函数会被调用

​ 3.是否再捕获的阶段触发函数，需要一个布尔值，一般都传false

通过这种方法可以同时为一个元素的相同事件绑定多个响应函数，这样当事件被触发时，响应函数会按照函数的绑定顺序执行

• 如果使用addEventListener()方法绑定事件，如果要取消浏览器的默认行为 调用event.preventDefault( )方法

这种方法兼容其他浏览器，但是不兼容IE8

IE8绑定事件的方法是attachEvent( )
参数 1.事件的字符串名字 要on onclick—>onclick
​ 2.回调函数，当事件触发时该函数会被调用
this返回的是window

4.事件的传播

微软公司认为事件是由内而外传播的，也就是当事件触发时，会先触发当前元素上的事件，然后再向当前元素的祖先元素传播，也就是说事件应该在冒泡阶段执行

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

W3C综合了两个公司的说法，将事件分成了三个阶段

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

阶段二：目标阶段 事件捕获到目标元素了，捕获阶段就结束了，并开始在目标元素上触发事件执行响应 函数

阶段三：冒泡阶段 世界按从目标元素开始，向它的祖先元素传播，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，只需要将addEventListener( )方法的第三个参数设置成true,但是我们一般不这么做

5.事件对象中的this

在事件处理程序内的 this 所引用的对象即 是设定了该事件处理程序的元素。

• 也就是事件是给那个对象绑定的this就是哪 个对象

6.鼠标事件

onwheel鼠标滚轮事件 event.wheelDelta正值代表滚轮向上滚，event.wheelDelta负值代表滚轮向下滚，

6.键盘事件

按键事件一般会注册在能够获取焦点的元素上，比如文本框

onkeydown onkeyup