事件的概念:
事件类型:在下方总结的各种事件就是事件类型
事件源:触发这个事件的元素就叫事件源
事件监听器:就是浏览器,使用addEventListener的方法添加事件监听器。关于事件监听器的更多介绍请看:https://blog.csdn.net/weixin_43606158/article/details/90728664
事件处理程序(函数):当你触发事件以后要执行的代码块就是事件处理程序。
鼠标事件:
- 右键点击: oncontextmenu
- 左键单击: onclick
- 鼠标左键双击: ondblclick
- 某个鼠标键被按下: onmousedown
- 某个鼠标键被松开: onmouseup
- 移动事件: onmousemove
- 移入事件: onmouseover(PS:有事件冒泡,即从后代元素上移动经过,会重复触发事件)
- 移出事件: onmouseout
- 移入事件:onmouseenter (PS:无事件冒泡,即从后代元素上移动经过,不会重复触发事件)
- 移出事件: onmouseleave
键盘事件:
- onkeydown: 某个键盘的键被按下
- onkeypress:某个键盘的键被按下或按住
- onkeyup:某个键盘的键被松开
Input事件:
- onchange:用户改变域的内容
- oninput: 输入框事件
- onsubmit:表单提交事件
- onselect:文本被选定
全局事件:
- onfocus:元素获得焦点
- onblur:元素失去焦点
- onload:某个页面或图像被完成加载
- onresize:窗口或框架被调整尺寸
- onunload:用户退出页面
- onreset:重置按钮被点击
- onerror:当加载文档或图像时发生某个错误
- onabort:图像加载被中断
- oncopy: 复制事件
- onpaste: 粘贴事件
- oncut: 剪切事件
- onbeforeunload: 浏览器刷新事件会触发
event对象:
作用:
代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。。。
获取方法:
- 标准:事件函数的第一个参数
- 非标准(IE9之前):window.event
- 兼容写法:event = event || window.event;
关于event鼠标的属性获取请看:最全的获取鼠标坐标的详细解析
键盘属性:
//获取键盘按键的虚拟键盘码 event.which event.keyCode //获取是否按下了键盘上的ctrl键 //返回true表示按下了ctrl并保持按下状态 event.ctrlKey //获取是否按下了键盘上的shift键 event.shiftKey //获取是否按下了键盘上的alt键 event.altKey
所有的事件都会持续更新。。。
笔者项目开发过程中用到一个就会总结一个