JavaScript:)事件

事件:事件源，事件类型，事件处理函数组成.
事件对象:
在IE低版本:window.event
chorme等等:在每一个事件处理函数的行参位置，默认第一个就是事件对象
兼容写法:e=e||window.event

点击事件的光标坐标点获取

• 相对事件源:offsetX和offsetY
• 相对浏览器:clientX和clientY
• 相对于页面:pageX和pageY

点击按键信息

事件对象.button获取信息
0为鼠标左键，2为鼠标右键

常见事件

• 浏览器事件:
  load:页面全部加载完毕
  scroll:浏览器滚动触发

• 鼠标事件:
  click:点击事件
  dblclick:双击事件
  contextmenu:右键单击事件
  mousedown:鼠标左键按下事件
  mouseup:鼠标左键抬起事件
  mousemove:鼠标移动
  mouseover:鼠标移入事件
  mouseout:鼠标移出事件
  mouseenter:鼠标移入事件
  mouseleave:鼠标移出事件

• 键盘事件
  keyup:键盘抬起事件
  KeyDown:键盘按下事件
  keypress:键盘按下再抬起事件
  获取键盘码的兼容写法:
  e.keyCode||e.which

• 组合按键
  altKey:alt键按下为TRUE，否则为FALSE
  shiftKey
  ctrlKey

• 表单事件
  change:内容改变
  input:内容输入
  submit:表单提交

• 触摸事件:
  touchstart:触摸开始
  touchend:触摸结束事件
  touchmove:触摸移动事件

事件绑定方式

• 事件监听去给元素绑定事件，addEventListener，IE里用 attachEvent

事件监听

1. addEventListener:
   语法:元素.addEventListener(‘事件类型’，‘事件处理函数’，冒泡还是捕获)
   事件类型不写on,
   顺序注册，顺序执行
2. attachEvent:
   语法:元素.attachEvent(‘事件类型’，事件处理函数)
   事件类型写on
   顺序注册，倒序执行

事件的传播

当元素触发一个事件时，其他父元素也会触发相同的事件，父元素的父元素也会触发相同的事件

冒泡，捕获，目标

• 目标:点击谁，目标就是谁
• 冒泡:
  从事件目标的事件处理函数开始，依次向外，直到window的事件处理函数触发
• 捕获:
  从window的事件处理函数开始，依次向内，只要事件目标的事件处理函数执行

事件委托

冒泡机制，点击子元素时，
也会同步触发父元素的相同事件，
子元素的事件委托给父元素
target:
target这个属性是事件对象里的属性，点击的目标
在IE使用:srcElement
兼容写法e.target||e.srcElement

• 元素的事件只能委托给结构父级或者结构父级的同样事件上

阻止默认行为

e.preventDefault():非IE使用，
e.returnValue=false:IE使用