事件
事件对象
触发事件时，会传一个event给事件处理程序，里面会包含与特定时间相关的属性
-
currentTarget 当前事件处理程序所在的元素
-
target 事件目标
在事件处理的内部，this值始终是登录 currentTarget 指向的节点的，在本节点上触发的事件， 他的currentTarget 和 target 是相等的，但是如果使用的是事件委托， 比如在ul 上绑定事件，那么触发的时候，处理函数中的this 始终是 ul的dom节点 -
bubbles 事件是否可以冒泡
-
type 事件触发的类型，比如说 click 啥的
在对一个处理函数，处理不同事件类型是有用，比如 click mouseover mouseEnter -
preventDefault 阻止默认事件
比如一个a 标签，点击之后不想让他进行跳转操作，则可以使用preventDefault来阻止默认事件 -
stopPropagation 阻止继续向上冒泡
-
stopImmediatePropagation() 用于取消所有的后续事件捕获和冒泡，并阻止调用后续的事件处理程序
事件类型
- 页面界面事件 UIEvent
- 焦点事件 FoucusEvent
- 鼠标事件 MouseEvent
- 滚轮事件 WheelEvent
- 输入事件 InputEvent
- 键盘事件 KeyboardEvent
- 合成事件 CompositionEvent
鼠标事件
- mouseover 从元素外部移动到元素内部
- mouseenter 从元素外部移动到元素内部触发，不会冒泡
- mouseleave 从元素内部移动到元素外部触发
- mousedown 鼠标摁下的一刻
- mouseup 松开鼠标触发
客户端坐标
通过 clientX clientY 来获取当前鼠标点击位置的关于浏览器的视口位置
页面坐标
pageX pageY获取页面上的坐标 在页面没有滚动的时候 page 和 client 的 x，y值是相同的
屏幕坐标
screenX screenY 获取的是光标的屏幕上的位置
总结一下三种区别
- pageX pageY 相当于获取的是当前这个页面的位置，在没有滚动的情况下与client 获取的位置是相同的
- screen 相当于 client 视口高宽加上页面左上角（不包括菜单栏等工具的位置），距屏幕左上角的高宽
修饰符
对应键盘上的 crtl alt meta shift
鼠标按键
0-9分别对应按下鼠标左键右键中键三种情况
鼠标滚动
mousewheel 来监听鼠标的滚动事件
键盘事件
-
keydown用户按下键盘上某个键时触发，而且持续按住会重复触发 -
keypress用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。
-
keyup用户释放键盘上某个键时触发
键码
每一个键位会保存一个特有的键码
HTML5 事件
- contextmenu 添加上下文菜单
- beforeunload 给开发者阻止卸载的机会
- DOMcontentloaded DOM树构建完成之后就触发
- readyStateChange
- pageshow pagehide 页面显示隐藏时候触发
内存与性能
事件委托
删除节点时，最好将节点上绑定的处理事件也一并删除
<html>
<div id="div"> <input type="button" id="mybtn"/> </div>
</html>
<script>
let btn = document.getelementbyid('mybtn')
let div = document.getelementbyid('div')
btn.onclick = function(){
btn.onclick = null
div.innerHtml = "procesion..."
}
</script>
// 这样可以避免处理函数一直占用内存
1039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
