JavaScript对象

事件基础

绑定事件

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

  <button onclick="code...">

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

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

• 事件监听方式

• IE9+
  • addEventListener(eventName, fn, true/false)
• IE8-
  • attachEvent(eventName, fn)

解除事件的绑定

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

  重新绑定一个空的function，覆盖前面

• 绑定方式 是 事件监听方式

  • removeEventListener(event, fn)
  • detachEvent(event, fn)

this的用法

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

事件类型

鼠标事件

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

键盘事件

• keydown 键盘按键按下
• keyup 键盘按键抬起
• keypress 键盘按键按下， 并不是所有的按键都可以触发（只有可以输入字符的按键）

文档事件

• load 文档加载完成
• unload 文档关闭
• beforeunload 文档关闭之前

表单事件

• submit 表单提交时 绑定给form元素
• reset 表单重置 绑定给form元素
• focus 获得焦点 可以输入的元素
• blur 失去焦点 可以输入的元素

• change 表单控制的内容改变时 通常绑定给radio checkbox select 若绑定给input,必须满足内容改变和失去焦点才能触发

• select 绑定给可以输入的元素 内容被选中时才能触发

图片事件

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

其他事件

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

事件的其他知识

event对象

• clientX 鼠标的x坐标
• clientY 鼠标的y坐标
• keyCode 键盘按键的值

元素对象 通用的属性

• getBoundingClientRect() 元素在文档上的坐标
• scrollLeft 水平方向滚动距离
• scrollTop 竖直方向滚动距离