事件、事件绑定、事件对象、默认行为

事件

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

• 浏览器赋予元素的事件行为：
• 鼠标事件：
  • click 点击事件（PC端：频繁点击N次，触发N次点击事件） 单击事件（移动端：300ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端会有300ms延迟）。click在移动端第一次点完，会等300ms如果这段时间内发生了第二次点击，算作双击事件。
  • dbclick 双击事件
  • contextmenu 鼠标右键点击触发
  • mousedown 鼠标按下
  • mouseup 鼠标抬起
  • mousemove 鼠标移动
  • mouseover 鼠标滑入
  • mouseout 鼠标滑出
  • mouseenter 鼠标进入
  • mouseleave 鼠标离开
  • mousewheel 鼠标滑轮滚动
  • …
• 键盘事件
  • keydown 键盘按下
  • keyup 键盘抬起
  • keypress 长按（除了shift/fn/capsLock键之外）
  • …
  • 手指事件
    [Touch Event 但手指事件模型]
    • touchstart 手指按下
    • touchmove 手指移动
    • touchend 手指松开
      [Gesture Event 多手指事件模型]
  • 表单事件
    • focus 获取焦点
    • blur 失去焦点
    • submit 点击表单提交（前提：表单元素都包含在form中，并且点击按钮是submit）
    • reset 表单重置 （前提：表单元素都包含在form中，并且点击按钮是reset ）
    • select 下拉框内容选中
    • change 内容改变
    • input 移动端经常使用，监控文本框内容随着输入的改变而触发
    • …
  • 资源事件
    • load 加载成功（window.onload/img.onload）
    • error 加载失败
    • beforeunload 资源卸载之前（页面关闭之前触发）- …
  • CSS3动画事件
    • transitionend transition动画结束
    • transitionstart transition动画开始
    • transitionrun transition动画运行中
    • …
  • 视图事件
    • resize 元素（浏览器）大小改变
    • scroll 滚动条滚动
    • …
  • …

事件绑定

给元素默认的事件行为绑定方法，这样在行为触发的时候，执行这个方法。

• 1.DOM0级事件绑定

语法：元素.on[事件] = [函数]
document.body.οnclick=function(){}
移除绑定：赋值为null或者其他非函数值皆可。
document.body.οnclick=null
原理：每一个DOM元素的私有属性上都有很多类似“onxxx”的私有属性，我们给这些代表事件的私有属性赋值，就是DOM0事件绑定；
特点：如果没有对应事件的私有制[例如：DOMContenLoaded] 则无法基于这种办法实现事件绑定；只能给当前元素的某个事件行为绑定一个方法，绑定多个方法，最后一个操作会覆盖以往的；
好处是执行效率快，而且开发者使用起来方便；

• 2.DOM2级事件绑定

语法：[元素].addEventListenner([事件],[方法],[捕获/冒泡]) document.body.addEventListenner=(‘click’,fn1,false)
移除：[元素].removeEventListenner([事件],[方法],[捕获/冒泡])
但是需要参数和绑定的时候一样document.body.removeEventListenner=(‘click’,fn1,false)
原理：每一个DOM元素都会基于__proto__，查找到EventTarger.prototype上的addEventListenner/removeEventListenner等方法，基于这些方法实现事件的绑定和移除。主要目的是方便移除事件绑定的时候使用。
特点：DOM2事件绑定，绑定的方法一般不是匿名函数，主要目的是方便移除事件绑定的时候使用；凡是浏览器提供的事件行为，都可以基于这种模式完成事件的绑定和移除（例如window.addEventListener(‘DOMContentLoaded’),fn1,false）；可以给当前元素的某个事件类型绑定多个不同的方法（进入到事件池），这样事件行为触发，会从事件池中依次按照顺序取出对应的方法然后执行；

事件对象

存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关）。
给当前元素的某个事件行为绑定方法，当事件行为触发，不仅会把绑定的方法执行，而且还会给方法传递一个实参，而且这个实参就是事件对象。

• 鼠标事件对象 MouseEvent
  • clientX/clientY 鼠标触发点距离当前窗口的X/Y轴的值
  • pageX/pageY 鼠标触发点距离body的X/Y轴的值
  • type 事件类型
  • target/srcElement 获取当前事件源（当前操作的元素）
  • path 传播的路径
  • ev.preventDefault()/ ev.returnValue = false 阻止默认行为
  • ev.stopPropagation()/ ev.cancelBubble = true阻止冒泡传播
  • …
• 键盘事件对象 KeyboardEvent
  • key / code 存储按键名字
  • which / keyCode 获取按键的键盘码
    • 方向键 左37 上38 右39 下40
    • Space 32
    • BackSpace 8
    • Del 46 MAC电脑中没有BackSpace，delete键是8
    • Enter 13
    • Shift 16
    • Ctrl 17
    • Alt 18
    • …
  • altKey 是否按下alt键（组合按键）
  • ctrlKey 是否按下ctrl键（组合按键）
  • shiftKey 是否按下shift键（组合按键）
• 手指事件对象 TouchEvent
  • changedTouches / touches / targetTouched 都是用来记录手指的信息的。平时常用的是changedTouches
    • 手指按下、移动、离开屏幕 changedTouches 都存储了对应的手指信息，哪怕离开屏幕后，存储的也是最后一次手指在屏幕中的信息；而touches 在手指离开屏幕后，就没有任何信息了；获取的结果都是一个TouchList集合，记录每一根手指的信息；
  • ev.changedTouches [0] 第一根手指信息
    • clientX / clientY
    • pageX / pageY
    • …
• 普通事件对象 Event

默认行为

• 默认行为：浏览器会赋予元素很多默认的行为操作

  • 鼠标右键菜单
  • 点击A标签实现页面跳转（页面跳转、锚点定位）
    • 点击A标签，先触发其点击事件行为，然才是默认的跳转
    • href =“javascript:;”
    • ev.preventDefault()
    • return false;
  • 不分浏览器会记录输入记录，在下一次的时候有模糊匹配
  • 键盘按下去会输入内容
    我们可以基于ev.preventDefault()来禁用这些默认行为

• 禁用右键菜单 （后续可能改为自己的菜单）