什么事件？
- 事件是浏览器赋予元素的默认行为,也可以理解为事件是天生具备的,不论我们是否为其绑定方法,当某些行为触发的时候,相关的事情都会被触发执行
什么是事件绑定?
- 给元素默认的事件行为绑定方法,这样可以在行为触发的时候,执行这个方法！
- 给body绑定一个点击事件-> 给body的点击事件行为绑定方法
- DOM 0级事件绑定
- 语法: [元素].on[事件]=[函数]
document.body.onclick = function() {}
- 移除绑定: 赋值为null或者其它的非函数值
- 如果没有对应的私有属性(如: DOMContentLoaded)则无法基于这个方式实现事件的绑定
- 通个事件只能绑定一个,后面的覆盖前面的
- 好处:执行快，而且开发者使用起来方便
- 语法: [元素].on[事件]=[函数]
- DOM 2级事件绑定
- 语法: [元素].addEventListener([事件], [方法], [捕获/冒泡])
document.body.addEventListener('click', fn1, false)
- 移除绑定: [元素].removeEventListener([事件], [方法], [捕获/冒泡]), 参数和绑定的时候要一样
document.body.removeEventListener('click', fn1, false)
- 绑定的方法一般不是匿名函数,主要的目的方便移除事件绑定的时候使用
- 原理: 每个DOM元素都会基于原型链的查找机制,查找到EventTarget.prototype上的addEventListener,removeEventListener等方法
- 同类型事件可以绑定多次(向事件池中加绑定的事件)
- 语法: [元素].addEventListener([事件], [方法], [捕获/冒泡])
document.body.onclick = function() {}
浏览器自带的事件
-
鼠标事件
- click 点击事件(pc端:频繁点击N次,触发N次点击事件) 单击事件(移动端:300ms内没有发生第二次点击操作,算作单机事件),所以click事件在移动端有300ms延迟
- dbclick 双击事件
- contextmenu 鼠标右击事件触发
- mousedown 鼠标按下
- mouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标经过
- mouseout 鼠标滑入
- mouseenter 鼠标进入
- mouseleave 鼠标离开
- wheel 鼠标滚轮滚动
-
键盘事件
- keydown 键盘按下
- keyup 键盘抬起
- keypress 长按 (出了Shift/Fn/CapsLock键之外)
- ...
-
表单元素常用事件
- blur 失去焦点
- focus 获取焦点
- submit 表单提交 (前提:表单元素都包含在form中,并且点击的按钮是type = "submit")
- reset 表单重置 (前提:表单元素都包含在form中,并且点击的按钮是type = "reset")
- select 下拉框内容选中
- change 内容改变
- input 移动端经常使用的,监控文本框内容随输入的改变而触发
-
移动端手指事件
- 手指事件
- [Touch Event 单手指事件]
- touchstart 手指按下
- touchmove 手指移动
- touchend 手指松开
- 更多的操作是这三种操作的结合
- [Gesture Event 多手指事件模型]
- 手指事件
-
资源事件
- load 加载成功 (window.onload / img.onload)
- error 加载失败
- beforeunload 资源卸载之前 (window.onbeforeunload 页面关闭之前)
-
css 过渡事件
- transitonstart transition动画开始
- transitonend transition 动画结束
- transitonrun transiton 动画执行中
-
视图事件
- resize 元素(浏览器)大小改变
- scroll 滚动条滚动
- ...
-
其它事件
