今日总结：js事件

• UI事件
  • load事件
    • 等待页面加载完成后执行load的回调函数
    • 延迟执行js代码
      • script标签的defer属性
        • defer是先下载js代码，等dom树生成后执行js代码
        • defer只适用于外部脚本
      • script标签的async属性
        • async是下载js代码，下载好后立即执行，不顾dom、css、render树是否已经生成
      • 动态生成script标签
        • 在执行js文件时，js文件在文档结点上动态添加script标签，为script标签添加src属性和js网络文件地址。
      • setTimeout延迟执行
      • 放在最后面
        • 将js文件放到html文件的body标签下
  • resize事件
    • 监听页面窗口的变化，变化时执行回调函数
    • 兼容性
      • 非火狐，没变换1px就执行回调函数
      • 火狐，在最后停止变换时执行一次回调函数
      • 使用防抖可以实现火狐功能
    • 建议，不要在resize中执行庞大计算
  • scorll事件
    • 滚轮滑动事件
    • 滚轮滑动常用案例
      • 由页面底部返回到页面顶部
      • 检测是否到达底部
• 鼠标事件
  • 鼠标事件
    • 点击click
    • 双击dbclick
    • 鼠标移入mouseenter（不包括子盒子）
    • 鼠标移出mouseleave
    • 鼠标移入mouseover（包括子盒子）
    • 鼠标移出mouseout
    • 鼠标按下mousedown
    • 鼠标松开mouseup
    • 鼠标移动mousemove
  • 事件对象e
    • 获取鼠标位置
      • scroll相对于屏幕大小
        • scrollX，scrollY
      • client相对于视口大小，（排除浏览器自带的系统栏）
        • clientX，clientY（不包含滑动距离）
        • pageX，pageY、IE不兼容（包含滑动距离），不建议使用，page和client效果一样
      • offset相对于盒子大小
        • offsetX，offsetY、兼容性不好
    • 获取激活事件的对象
      • e.target
      • e.target.nodeName
• 键盘事件
  • 键盘事件
    • keydown，按所有键按下事件，按住不动重复触发
    • keyup，按所有键松开事件
    • keypress，按下字符键时触发
  • 事件对象
    • e.keyCode，键码值，判断按键的标准
    • e.charCode，键码值，ASCLL编码形式
  • shiftkey、altkey、ctrlkey
• 表单事件
  • fouce，元素获得焦点时触发
  • blur，元素失去焦点时触发
  • submit，提交表单
  • change，当input、textarea元素的value值改变且失去焦点时、select元素选项改变
  • input，当input、textarea元素value值改变同步触发事件，select元素选项改变时触发
• 触摸事件
  • touchstart，触摸时触发事件
  • touchmove，触摸移动时触发事件
  • touchend，停止触摸，触摸离开事件this时触发
  • touchcancel，停止触摸
  • 文档推荐：事件 - 触摸事件 - 《阮一峰 JavaScript 教程》 - 书栈网 · BookStack
  • 注意：touch中的e.changedTouches不是触摸点，是触摸点集合
• 冒泡和捕获，事件流
  • 冒泡是由IE浏览器提出
  • 事件流的阶段
    • 捕获阶段
      • 事件响应从最外层的Window开始，逐级向内层前进，直到具体事件的目标元素。在捕获阶段不会处理元素注册的冒泡事件
    • 目标阶段
      • 触发事件最底层的文件，用户点击的盒子
    • 冒泡阶段
      • 事件响应从最低层一层一层向外传递，直到window
  • 事件代理/委托
    • 事件代理就是利用冒泡和捕获机制实现将内层元素事件绑定到外部元素身上
    • 例如：ul中包含多个li，不使用事件代理，每个li都需要添加click事件。使用代理只需为ul添加click事件即可。
  • 阻止冒泡
    • stoppropagation() 非IE
    • cancelBubble = true IE
  • 组织默认
    • preventDefault() 非IE
    • returnValue = true IE