一些关于event的 记录
2017-08-13 01:31
260 查看
事件对象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
什么是: 封装事件信息,并提供修改事件行为的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