事件基础
绑定事件
-
把事件当做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 竖直方向滚动距离
