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)
