JavaScript事件

JavaScript事件

1. 事件作用

JavaScript 通过事件检测用户行为

2. 鼠标事件

onclick： 鼠标左键单击

ondblclink： 左键双击

oncontextmenu： 点击鼠标右键触发

onmousedown：鼠标任意键按下时触发

onmouseup： 鼠标任意键抬起时触发

onmouseenter：鼠标移入元素时触发

onmouseleave： 鼠标移出元素触发

onmousemove：鼠标在元素上移动触发

3. 滚轮事件

onmousewheel： 鼠标滚轮在元素上滚动触发

4. 键盘事件（document）

onkeydown： 按住键盘上任意键触发

onkeyup： 按键抬起触发

keyCode 获取键盘值对应的ASCII值

e.ctrlKey 判断ctrl按键是否被按下

e.shiftKey 判断shift健是否被按下

5.框架事件

window.onload : 当用户进入或离开页面时就会触发 onload 和 onUnload 事件

onerror : 页面加载错误后触发

onscroll : 页面滚动时触发

6.表单事件

onsubmit : 用于在提交表单之前验证所有的表单域

onchange : 用户一旦改变了域的内容checkEmail() 函数就会被调用

.reset() : 重置

.submit() : 提交

onblur : 失去焦点事件

onfocus : 获取焦点事件

onreset : 表单重置事件

7.事件委托

传统绑定事件方式
1.每一个事件都有事件驱动函数，函数在js中是以对象的形式存储到内存中
如果便利每一个标签分别绑定事件函数，就会在内存中存在多个功能类似的函数对象
造成内存浪费
2.因为是遍历绑定事件,需要执行for
for在执行的时候会延迟dom就绪时间

事件委托:
1.在点击li的完毕后由于事件冒泡，会触发ul的点击事件
2.如果只给ul绑定点击事件，那么点击li的时候触发ul的点击事件
3.不会for循环，降低DOM的就绪时间
4.不会再内存中存在多个功能相似的函数对象，降低内存的占用空间
5.如果给document绑定点击事件，那么可以通过这个事件来管理网页中所有的该类型事件