文章字数：1775,阅读全文大约需要7分钟
绑定方法
dom.addEventListener("click",func,false);
对dom对象绑定事件，用func函数处理事件，false代表组织冒泡dom.removeEventListener("click", myFunction);移除
1 | passwordOb.addEventListener("keyup",checkFun,false); |
事件
鼠标事件
| 属性名 | 描述 |
|---|---|
| onclick | 点击对象触发 |
| oncontextmenu | 点击右键打开上下文菜单世触发 |
| ondblclick | 双击对象触发 |
| onmousedown | 鼠标按钮按下 |
| onmouseenter | 鼠标指针移动到元素上(事件不支持冒泡) |
| onmouseleave | 鼠标指针移出元素(事件不支持冒泡) |
| onmousemove | 元素上的指针移动时触发 |
| onmouseover | 鼠标移到元素上(事件支持冒泡) |
| onmouseout | 鼠标从元素上移开(事件支持冒泡) |
| onmouseup | 鼠标按键松开 |
键盘事件
| 属性名 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 键盘按键被按下并松开 |
| onkeyup | 按键被松开 |
对象事件
| 属性名 | 描述 |
|---|---|
| onabort | 图像的加载被打断 |
| onbeforeunload | 即将离开页面(刷新或关闭)时触发 |
| onerror | 加载文档或图像失败时触发 |
| onhashchange | 当该事件在当前的URL的锚部分发生修改时触发 |
| onload | 一张页面或者图像完成加载 |
| onpageshow | 用户访问页面触发（离开后） |
| onpagehide | 当用户离开当前网页跳转到另一个页面触发 |
| onresize | 窗口或框架被调整大小 |
| onscroll | 文档被滚动时发生 |
| onunload | 用户退出页面(beforeunload->unload->pagehide) |
表单事件
| 属性名 | 描述 |
|---|---|
| onblur | 元素失去焦点 |
| onchange | 表单内容改变 |
| onfocus | 获取焦点 |
| onfocusin | 即将获取焦点触发 |
| onfocusout | 即将失去焦点触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本 |
| onselect | 选取文本时触发(选中一小段文字) |
| onsubmit | 表单提交 |
剪贴板事件
| 属性名 | 描述 |
|---|---|
| oncopy | 用户拷贝元素内容时触发 |
| oncut | 剪切元素时触发 |
| onpaste | 用户粘贴元素内容时触发 |
打印事件
| 属性名 | 描述 |
|---|---|
| onafterprint | 页面已经开始打印，或者打印窗口已经关闭时触发 |
| onbeforeprint | 页面即将开始打印时触发 |
拖动事件
| 属性名 | 描述 |
|---|---|
| ondrag | 元素正在拖动时触发 |
| ondragend | 元素完成拖动时 |
| ondragenter | 拖动元素放入放置目标时 |
| ondragleave | 事件在拖动元素离开放置目标时触发 |
| ondragover | 元素放置在目标上触发 |
| ondragstart | 用户开始拖动元素 |
| ondrop | 拖动元素放置在目标区域时触发 |
多媒体
| 属性名 | 描述 |
|---|---|
| onabort | 视频、音频终止时触发 |
| oncanplay | 用户可以开始播放视频、音频时触发 |
| oncanplaythrough | 视频、音频可以正常播放，不用停顿和缓冲时触发 |
| ondurationchange | 事件在视频、音频时长发生变化时触发 |
| onemptied | 播放列表为空时触发 |
| onended | 视频、音频播放结束时触发 |
| onerror | 视频、音频数据加载期间发生错误 |
| onloadeddata | 浏览器加载视频、音频时当前帧时触发 |
| onloadedmetadata | 指定的视频、音频元数据加载后触发 |
| onloadstart | 浏览器开始勋在指定视频、音频时触发 |
| onpause | 视频、音频暂停时触发 |
| onplay | 视频、音频开始时触发 |
| onplaying | 视频、音频暂停或者在缓冲后准备重新开始时触发 |
| onprogress | 浏览器下载指定视频、音频时触发 |
| onratechange | 视频、音频播放速度发生改变时触发 |
| onseeked | 重新定位视频、音频时触发 |
| onseeking | 重新定位视频、音频时触发 |
| onstalled | 浏览器获取媒体数据，但是媒体数据不可用时触发 |
| onsuspend | 浏览器读取媒体数据终止时触发 |
| ontimeupdate | 当前播放位置发送改变时触发 |
| onvolumechange | 当音量发送改变时触发 |
| onwaiting | 视频由于要播放下一帧而需要缓存时触发 |
动画事件
| 属性名 | 描述 |
|---|---|
| animationend | css动画结束播放时 |
| animationiteration | css动画重复播放时 |
| animationstart | css动画开始播放时触发 |
过度事件
| 属性名 | 描述 |
|---|---|
| transitionend | css完成过度后触发 |
其它事件
| 属性名 | 描述 |
|---|---|
| onmessage | 从对象接收到消息时触发（如websocket） |
| ononline | 浏览器开始在线工作时触发 |
| onoffiline | 浏览器开始离线工作时触发 |
| onpopstate | 浏览历史发生改变时触发 |
| onshow | |
| onstorage | web strage更新时触发 |
| ontoggle | 打开或关闭 元素时触发 |
| onwheel | 鼠标滚轮在元素上上下滚动时触发 |
事件对象
属性
| 属性名 | 描述 |
|---|---|
| bubbles | boolean 事件是否是起泡事件 |
| cancelable | boolean 事件是否可取消默认动作 |
| currentTarget | 返回事件触发器监听的元素 |
| eventPhase | 事件传播的当前阶段 |
| target | 触发此时间的元素 |
| timeStamp | 时间生成的时间和日期 |
| type | 当前Event对象表示的时间的名称 |
方法
| 方法名 | 描述 |
|---|---|
| initEvent() | 初始化新创建的Event对象的属性 |
| preventDefault() | 通知浏览器不要执行事件关联的默认动作 |
| stopPropagation() | 不再派发事件 |
其它方法
| 方法名 | 描述 |
|---|---|
| handleEvent() | 把任意对象注册成为事件处理程序 |
| createEvent() | 该方法将创建一种新的事件类型，该类型由参数 eventType 指定 |
键盘鼠标对象属性
| 属性名 | 描述 |
|---|---|
| altKey | 事件触发时，alt是否被按下 |
| button | 那个鼠标按钮被点击 |
| clientX | 鼠标指针水平位置(浏览器内容区域的左上角,页面滚动参照点会变) |
| clientY | 鼠标指针纯质坐标 |
| Location | 按键在设备上的位置 |
| charCode | onkeypress事件触发按键值的字母代码 |
| key | 按下按键时返回按键的标识符 |
| keyCode | 键盘字符代码 |
| which | 键盘字符代码 |
| metaKey | meta按键是否被按下 |
| relatedTarget | 与事件的目标节点相关的节点 |
| screenX | 触发事件的水平位置，以显示器作为参照点 |
| screenY | 垂直左边 |
| shiftKey | shift按钮是否被按下 |
(pageX参照内容区域左上角，不会随滚动而变化)
initMouseEvent()// 初始化鼠标事件对象的值
initKeyboardEvent()// 初始化键盘事件对象的值