• 事件
• 事件绑定
• 事件对象
• 事件传播
• 事件委托

事件

事件由浏览器赋予元素。MDN事件 (opens new window)

• 鼠标事件
  • click 点击事件(PC) 单击事件(移动端:300ms延迟)
  • dblclick 双击事件
  • contextmenu 右键点击
  • mousedown 按下
  • mouseup 抬起
  • mousemove 移动
  • mouseover 滑出
  • mouseenter 进入
  • mouseleave 离开
  • mousewheel 滚轮滚动
• 键盘事件
  • keydown
  • keyup
  • keypress (除shift, fn, capslock)
• 触屏事件
  • touchstart
  • touchmove
  • touchend
  • gesture...
• 表单事件
  • focus
  • blur
  • submit
  • reset
  • select
  • change
  • input 移动端,监控文本框变动
• 资源事件
  • load (window.onload/ img.onload)
  • error
  • beforeunload
• CSS3动画事件
  • transitionstart 过渡开始
  • transitionend 过渡结束
  • transitionrun 过渡中
  • animation...
• 视图事件
  • resize
  • scroll
  • ...
• 剪贴板
• 拖放
• 媒体

事件绑定

• DOM0: document.body.onclick = function() {}
• DOM2:
  • element.addEventListener('click',function(){},false)
  • element.removeEventListener('click',function(){},false)
  • true:捕获阶段触发 / false：冒泡阶段触发(默认)
  • this: 事件对象
  • ie8兼容:element.attachEvent('onclick',function(){}) 后绑定的先执行，this:window

事件对象

• MouseEvent
  • clientX/Y: 鼠标触发点距当前窗口的X/Y轴坐标
  • pageX/Y: 距离BODY的X/Y轴坐标:event.pageX || scroll().left + event.clientX;
  • type: 事件类型
  • target/srcElement: 事件源
  • path 传播路径
  • preventDefault()/ returnValue=false 阻止默认行为
  • stopPropagation()/ cancelBubble=true 阻止冒泡传播
• KeyboardEvent
  • which/ keyCode
    • 方向键: 37 38 39 40
    • space: 32
    • BackSpace: 8
    • Del 46 (Mac 8)
    • Enter 13
    • Shift 16
    • Ctrl 17
    • Alt 18
    • ...
  • altKey
  • ctrlKey
  • shiftKey
• TouchEvent
  • changedTouches
  • ev.changedTouches[0]

事件传播

• 捕获 目标 冒泡

事件委托