一、事件基础

1.绑定事件

• 把事件当做HTML元素的属性

  <button onclick="code...">

• 把事件当做dom对象的方法

  dom.onclick = function(){code....}

• 事件监听方式
  • addEventListener(eventName, fn, true/false)
  • attachEvent(eventName, fn)（IE8-）

2. 解除事件的绑定

• 绑定方式： 把事件当做html元素属性 / 把事件当做dom对象的方法

  重新绑定一个空的function，覆盖前面dom.onclick = function(){}

• 绑定方式 是 事件监听方式
  • removeEventListener(event, fn)
  • detachEvent(event, fn)

3.this的用法

• 循环给一组元素绑定事件的时候
• 事件作为html元素属性的时候，函数调用，传this表示 该元素

• 在元素内部 通过属性形式 <button onclick="fn(this)"> 此时this表示所在的元素

    
        
        
         
  哈哈哈
        
         
  嘿嘿嘿
        
         
  嘻嘻嘻
        
         
  呵呵呵
        
         
  呀呀呀
    
        
      

二、事件类型

1.鼠标事件

• click 单击
• dblclick 双击
• contextmenu 右击
• mouseover 鼠标进入元素
• mouseout 鼠标离开元素
• mousedown 鼠标按键按下
• mouseup 鼠标按键抬起
• mousemove 鼠标移动

2.键盘事件

• keydown 键盘按键按下
• keyup 键盘按键抬起
• keypress 键盘按键 按下 (只有字符按键) (控制按键不可以 Ctrl shift 上下左右都不行)

3.文档事件

• load 加载完成（绑定给window、img、document.body）
• unload 文档关闭
• beforeunload 文档关闭 (兼容性好)

4.表单事件

• submit 表单提交的时候, 绑定给form元素
• reset 表单重置, 绑定给form元素
• blur 失去焦点(绑定给输入框)
• focus 获得焦点(绑定给输入框)
• change 表单控制的内容改变（通常绑定给select radio checkbox）
  • 如果绑定给input 必须同时满足两个条件
  • 内容改变和失去焦点 才能触发
• select 可输入的元素绑定input 或 textarea 内容被选中的时候触发

5.图片事件

• abort 图片加载中断
• load 图片加载完成
• error 图片加载错误

6.其他事件

• scroll 元素内部的内容滚动 （适合于有滚动条的元素）
• resize 绑定给window, 窗口尺寸发生变化

三、Event 对象

1.Event种类

• mouseEvent
• keyboardEvent
• focusEvent

2.属性

• clientX 鼠标的x坐标
• clientY 鼠标的Y坐标
• keyCode 键盘按键的值
• button 鼠标按键的标示
  • 0 按了左键
  • 1 按了滚轮
  • 2 按了右键
• cancelBubble 阻止事件冒泡 设置为true

• target 返回触发此事件的元素(具体触发事件的元素)

• type 返回事件类型(mouse keyborad... )
• timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始
• altKey 返回当事件被触发时，"ALT" 是否被按下。
• ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。

• shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

3.方法

• stopPropagation() 阻止冒泡
• preventDefault() 阻止默认动作

4.事件的冒泡和捕获

四、Element(所有的元素都具有的属性)

• offsetLeft
• offsetTop
• scrollLeft 内容向左滚动的距离（也可以为滚动条滚动的距离）
• scrollTop 内容向上滚动的距离（也可以为滚动条滚动的距离）
• getBoundingClientRect() 元素到视窗口的距离（ box.getBoundingClientRect().left/top）