JavaScript 事件机制
1 什么是事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
2 把事件绑定给元素
事件监听方式(标准方式)
addEventListener(Event, fn) (非IE IE9+)
attachEvent(Event, fn) (IE8-)
btnEle.addEventListener('click', function(){
}, false) fasle表示 冒泡阶段触发（默认），设置成true，就是捕获阶段触发。
事件的捕获和冒泡
捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素 到 祖先元素
事件默认在冒泡阶段触发
把事件作为元素的方法
dom.onclick = fn
把事件作为标签的内部属性
<button onclick="code..">
3 给元素解除事件绑定
标准方式绑定的事件
removeEventListener(event, fn) (IE9+ 非IE)
detachEvent(Event, fn) (IE8-)
其他方式绑定
重新绑定事件,用空的函数 覆盖 前面的
dom.onclick = function(){}
4 this在事件中的作用
- 给一组元素绑定事件
- 在元素内部 通过属性形式
<button onclick="fn(this)">此时this表示所在的元素
5 事件列表
5.1 鼠标事件
click 单击左键
dblclick 双击 左键
contextmenu 右单击
mouseover 鼠标悬浮
mouseout 鼠标移出
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标移动
mouseenter 鼠标悬停
mouseleave 鼠标离开
5.2 键盘事件
keydown 键盘按键 按下
keyup 键盘按键 抬起
keypress 键盘按键 按下 (只有字符按键) (控制按键不可以 Ctrl shift 上下左右都不行)
5.3 文档事件
load 加载完成
unload 文档关闭
beforeunload 文档关闭 (兼容性好)
5.4 表单事件
submit 表单提交的时候, 绑定给form元素
reset 表单重置, 绑定给form元素
blur 失去焦点
focus 获得焦点
change 表单控制的内容改变 通常绑定给 radio checkbox select 如果绑定给输入的input, 必须满足 内容改变和失去焦点才能触发
select input 或 textarea 内容被选中的时候触发
input 输出内容改变 触发
5.5 图片事件
abort 图片加载中断
load 图片加载完成
error 图片加载错误
5.6文档事件
load 绑定给body 绑定给window 绑定给 img 、link、script 文档加载完成
unload 文档关闭
beforeunload 文档关闭之前
5.7其他事件
scroll 元素内部的内容滚动 适合于有滚动条的元素
resize 绑定给window, 窗口尺寸发生变化
6 Event对象
6.1 分类
Event
MouseEvent
KeyboardEvent
FocusEvent
...................
6.2 属性
-
clientX 鼠标的x坐标
-
clientY 鼠标的Y坐标
-
button 鼠标按键的标示
值 0 按了左键 1 按了滚轮 2 按了右键 -
keyCode 键盘按键的值
-
cancelBubble 阻止事件冒泡 设置为true
-
target 返回触发此事件的元素
-
tyep 返回事件类型
-
timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始
-
altKey 返回当事件被触发时，"ALT" 是否被按下。
-
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
-
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
6.3 方法
-
stopPropagation() 阻止事件冒泡
-
preventDefault() 阻止元素默认的事