web前端高级JavaScript - 事件和事件绑定的基础知识梳理

事件

• 什么是事件

事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行，只不过如果没有为其绑定方法，当事件被触发的时候将什么都不做。

• 浏览器赋予元素的事件行为

事件参考

• 鼠标事件
  • 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