bom event总结

bom event总结

event
绑定
在html中
html
<any on事件名=“函数(this)”
js
function 函数(any){…}
问题
不符合内容与行为分离的要求，不便于维护
在js中动态绑定
一个事件仅绑定一个处理函数
elem.on事件名=function(){
//this->elem
}
问题
一个事件只能绑定一个处理函数
不能被remove移除掉，只能onXXX=null
只能移除由onXXX绑定的事件处理函数
无法移除addEventListener绑定的事件处理函数
一个事件可绑定多个处理函数
elem.addEventListener(“事件名”,fn);
elem.removeEventListener(“事件名”,fn)
如果一个处理函数可能被移除，在绑定时不能使用匿名函数，必须使用有名的函数
事件模型
DOM
3个阶段
捕获
由外向内, 记录各级父元素绑定的事件处理函数，只记录，不执行
目标触发
优先触发目标元素上的事件处理函数
冒泡
由内向外, 反向依次触发捕获阶段记录的事件处理函数
IE8
2个阶段
没有捕获
事件对象
什么是事件对象？
事件发生时自动创建
封装事件信息的
并提供操作事件的API的对象
获取
事件对象默认作为处理函数的第一个参数传入
操作
取消冒泡/停止蔓延
function(e){
e. stopPropagation();
}
利用冒泡
问题
浏览器触发事件，采用的是遍历所有事件监听对象的方式
如果事件监听越多，遍历时间越长，响应事件就越慢
优化
尽量少的添加事件监听
使用
如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子元素共用
2个难题
如何获得目标元素
错误
this
父元素
正确
e.target
不随冒泡而改变
如何筛选目标元素
元素名nodeName
选择器
取消事件/阻止默认行为
e.preventDefault()
什么时候使用？
阻止<a href="#xxx" 修改url
在表单的onsubmit事件结尾阻止表单提交
用H5拖拽API，需要先禁用浏览器默认的拖拽行为
事件坐标
相对于屏幕左上角
e.screenX/screenY
相对于文档显示区左上角
e.clientX/clientY
相对于触发事件元素的左上角
e.offsetX/offsetY
页面滚动
事件
window.onscroll
获得页面滚动过的高度
document.body.scrollTop
document.documentElement.scrollTop
方法
window.scrollBy(left的增量，top的增量)
window.scrollTo(left,top)