一些关于event的 记录

事件对象event:

什么是: 封装事件信息，并提供修改事件行为的API

何时: 如果希望获得事件信息，或希望修改事件的默认行为时

创建: 不用手动创建

    当事件发生时，浏览器会自动创建事件对象，封装事件信息。

  获得:浏览器会将事件对象作为处理函数的第一个参数自动传入: .on事件名=function(e){

…e->event…

}

事件对象API:

1. 阻止蔓延/取消冒泡: e.stopPropagation()

2. 利用冒泡:

优化: 尽量少的添加事件监听

     因为浏览器在事件发生时，是通过遍历查找事件对应的事件监听。如果监听很多，遍历就会慢，导致网页相应速度变慢。

如何: 只要多个子元素绑定相同事件时，其实只要在父元素绑定一次即可，所有子元素共用！

问题1: 如何获得实际单击的目标元素

解决:

  错误: this  this->父元素 不再指目标元素

  正确: e.target 代替 this

问题2: 目标元素一定是想要的吗？

解决: 在事件处理函数中，先判断目标元素的特征(标签名,属性,class,内容…)是否想要，再决定是否执行操作

3. 阻止默认行为:

页面中的元素有些包含默认行为:  

  比如: <a href=”#top” -> 在地址栏结尾添加#top锚点地址

       <input type=”submit” 默认提交！

何时: 只要默认行为不是想要的，就可阻止默认行为

如何: e.preventDefault()

4. 鼠标坐标: 3组:

相对于屏幕左上角: e.screenX/screenY

相对于文档显示区左上角: e.clientX/clientY

相对于当前元素左上角: e.offsetX/offsetY