事件
- 什么是事件
事件是浏览器赋予元素的默认行为,也可以理解为事件是天生具备的,不论我们是否为其绑定方法,当某些行为触发的时候,相关的事件都会被触发执行,只不过如果没有为其绑定方法,当事件被触发的时候将什么都不做。
- 浏览器赋予元素的事件行为
- 鼠标事件
- click 点击事件(PC:点击N次就触发N次事件) 单击事件(移动端:300ms内没有发生第二次点击操作,算作单击事件行为,所以click在移动端有300ms的延迟)
- dblclick 双击事件
- contextmenu 鼠标右键点击事件
- mousedown 鼠标按下
- mouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标滑入
- mouseout 鼠标滑出
- mouseenter 鼠标进入
- mouseleave 鼠标离开
- wheel 鼠标滚轮滚动
- 键盘事件
- keydown 键盘按下
- keyup键盘抬起
- keypress 长按(除了Shift/Fn/CapsLock键之外)
- 手指事件
[Touch Event 弹手指事件模型]
- touchstart 手指按下
- touchmove 手指移动
- touchend 手指松开
[Gesture Event多手指事件]- 表单事件
- focus 获得焦点
- blur 失去焦点
- submit 表单提交(前提:表单元素都包含在form中,并且点击的按钮时submit)
- reset 表单重置
- select 下拉框内容被选中
- change 内容改变
- input 文本框内容改变事件
- 资源事件
- load 加载成功(window.onload / img.onload)
- error 加载失败
- beforeunload 资源卸载之前(window.onbeforeunload 页面关闭前触发)
- CSS3动画事件
- transitionstart transition动画开始
- transitionrun transition动画运行中
- transitionend CSS过度完成(transition动画结束)
- 视图事件
- resize 元素或浏览器大小改变
- scroll滚动事件
事件绑定
- 什么是事件绑定
给元素默认的事件行为绑定方法,这样可以在行为被触发时执行该方法
- DOM0级事件绑定
- 语法: [元素].on[事件] = [函数] document.body.onclick = function(){}
- 移除绑定: 赋值为null或其他非函数值即可 document.body.on