JS学习之事件和事件绑定

事件和事件绑定

// 事件和事件绑定
/* 
 * 什么是事件？
     事件是浏览器赋予元素的默认行为，也可以理解为事件时元素天生自带的，不论是否给其绑定方法，当某些行为触发的时候，相关的事件都会被执行触发


 * 浏览器赋予元素的事件行为
    - 鼠标事件
      + click  点击/单击事件（PC）
      + dbclick  双击事件
      + contextmenu  鼠标右键点击事件
      + mousedown  鼠标按下
      + mouseup  鼠标抬起
      + mousemove  鼠标移动
      + mouseover  鼠标滑入
      + mouseout  鼠标滑出
      + mouseleave  鼠标离开
      + mouseenter  鼠标进入
      + mousewheel  鼠标滚轮滚动
      + ...

    - 键盘事件
      + keydown  键盘南下
      + keyup  键盘抬起
      + keypress  长按键盘（除了Shift、Fn、CapsLook键外）

    - 手指事件（移动端）
      [Touch Event 单手指事件]
        + touchstart  手指按下
        + touchmove  手指移动
        + touchend  手指松开
        + touchcancel  触摸中断
      [Gesture Event 多手指事件]
        + gesturestart—手势开始，手指触碰当前元素，屏幕上有两个或者两个以上的手指
        + gesturechange—手势变化，手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动
        + gestureend—手势结束，在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指
      注意：gesture系列事件目前只有IOS上的浏览器支持

    - 表单事件
      + focus  获取焦点
      + blur  失去焦点
      + reset  点击重置按钮（前提：表单都包含在form中）
      + submit  点击提交按钮（前提：表单都包含在form中）
      + selecte  有文本被选中
      + change  内容改变（输入完内容，输入框失去光标时触发）
      + input  内容改变（在输入内容过程中会一直触发）
      + ...

    - 资源事件
      + error  资源加载失败时
      + load  资源加载成功
      + beforeunload  资源卸载之前（window.beforeunload 页面关闭之前触发）
      + ...

    - CSS3动画事件
      + transitionend  过渡完成
      + transitionstart  过渡开始
      + transitionrun   正在过渡中
      + ...

    - 视图事件
      + resize  窗口大小改变触发
      + scroll  滚动条滚动

    - ...



 * 什么是事件绑定？
     给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法
     - DOM0级事件绑定
       语法：[元素].on[事件] = [函数]
       document.body.onclick = function(){}

       移除绑定：赋值为null或者其他非函数类型的值
       document.body.onclick = null

       原理：每一个DOM元素对象的私有属性上有很多类似于"onxxx"的属性（初始值都是null），给这些代表事件的私有属性进行赋值，就是DOM0级事件绑定
          + 如果没有对应事件的私有属性（例如：DOMContentLoaded）则无法基于这种办法事件事件绑定
          + 一个事件行为只能绑定一个方法（同一个事件行为绑定多次最后都只会触发最后绑定的那个）
          + 好处是执行效率快，而且开发者使用起来也方便

     - DOM2级事件绑定
       语法：[元素].addEventListener([事件],[方法],[捕获/冒泡])
       document.body.addEventListener('click', fn1,false)

       移除绑定：[元素].removeEventListener([事件],[方法],[捕获/冒泡]) 要求所有参数和绑定时的一样
       document.removeEventListener('click', fn1, false)

       原理：每一个DOM元素都会基于原型链的查找机制，查找到EventTarget.prototype上的addEventListener/removeEventListener等方法，基于这些方法实现事件的绑定和移除；
          + DOM2级事件绑定，绑定的方法一般是具名函数（为了方便移除绑定）
          + 凡是浏览器提供的实现行为，都可以基于这种方法实现事件绑定和移除（例如：window.addEventLIstener('DOMContentLoaded',fun)）
          + DOM2级事件绑定基于事件池机制：同一个元素的同一个事件行为可以同时绑定多个不同的方法，当某一事件行为触发的时候，会按照给事件类型绑定方法时的顺序依次执行所有绑定的方法
          
*/

function f1(){
  console.log('f1');
}
function f2(){
  console.log('f2');
}
function f3(){
  console.log('f3');
}
document.body.addEventListener('click', f1, false);
document.body.addEventListener('click', f2, false);
document.body.addEventListener('click', f3, false);
// 点击body会移除输出 f1 f2 f3