js事件绑定

绑定方法

1. dom.addEventListener("click",func,false);
   对dom对象绑定事件，用func函数处理事件，false代表组织冒泡

2. dom.removeEventListener("click", myFunction);移除

passwordOb.addEventListener("keyup",checkFun,false);
//处理事件的函数
function checkFun(e){
  console.log("元素："+e.target+"触发了事件");
}

事件

鼠标事件

属性名	描述
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()// 初始化键盘事件对象的值