一、事件
- 绑定事件(JS)
- 一个事件只绑定一个处理函数
元素.on事件名=function(){...}
- 一个事件绑定多个处理函数
元素.addEventListener("事件名",原事件处理函数)
- 移除一个事件监听
元素.removeEventListener("事件名",原事件处理函数对象)
- 一个事件只绑定一个处理函数
- 事件模型
- 捕获
- 目标触发
- 冒泡
- 事件对象
- 获得事件对象
元素.on事件名=function(){...}
- 阻止冒泡
e.stopPropagation()
- 多个元素绑定相同事件,用冒泡/事件委托3步
a. 事件只在父元素上绑定一次 b. e.target代替this c. 判断e.target的任意特征是否是我们想要的元素
- 阻止元素默认行为
e.preventDefault()
- 获取鼠标位置
a. 相对于屏幕左上角的x,y坐标: e.screenX, e.screenY b. 相对于文档显示区左上角的x,y用坐标: e.clientX, e.clientY c. 相对于事件所在元素左上角的x,y坐标: e.offsetX e.offsetY
- 页面滚动事件
window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop|| document.body.scrollTop //如果scrollTop>多少,就执行xx操作 //否则就恢复原样 }
- 获得事件对象
二、this
this只看调用时
1. obj.fun()
this->obj
2. fun() 或 (function(){ ... })() 或 多数回调函数
this->window
3. new Fun()
this->new正在创建的新对象
4. 类型名.prototype.共有方法=function(){ ... }
this->将来谁调用指谁,同第一种情况
5. 事件处理函数中的this->当前正在触发事件的DOM元素对象