js DOM 事件 事件监听

事件属性

改变

属性	此事件发生在何时…
onchange	域的内容被改变 （<input>, <select>, 和 <textarea>）
onresize	窗口被重新调整大小

选择

属性	此事件发生在何时…
onfocus	元素获得焦点
onblur	元素失去焦点
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
onselect	文本被选中

键盘

属性	此事件发生在何时…
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开

鼠标

属性	此事件发生在何时…
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onclick	当用户点击某个对象时调用的事件句柄 ，不是单击
ondblclick	当用户双击某个对象时调用的事件句柄
onwheel	该事件在鼠标滚轮在元素上下滚动时触发

剪贴板事件

属性	描述
oncopy	该事件在用户拷贝元素内容时触发
oncut	该事件在用户剪切元素内容时触发
onpaste	该事件在用户粘贴元素内容时触发

表单事件

属性	此事件发生在何时…
oninput	元素获取用户输入时触发
onsubmit	确认按钮被点击 针对表单 input type=submit
onreset	重置按钮被点击 针对表单 input type=reset

各种中断服务

属性	此事件发生在何时…
onload	一张页面或一幅图像完成加载
onunload	用户退出页面 可用于处理 cookie
onbeforeunload	该事件在即将**离开页面（刷新或关闭）**时触发
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onabort	图像的加载被中断
onerror	在加载文档或图像时发生错误
onscroll	当文档被滚动时发生的事件。
onhashchange	该事件在当前 URL 的锚部分发生修改时触发。 location.hash 或 location.href 改变

菜鸟教程-DOM事件

添加事件处理程序

方法	描述
.onclick = function(){code}	向 onclick 事件添加事件处理程序
标签中添加 onclick 属性

事件监听

添加事件监听

.addEventListener(事件,代码) 方法为指定元素指定事件处理程序,不会覆盖已有的事件处理程序

• 可添加多个（相同）事件处理程序
• 可向任何DOM对象添加，不限于元素
• 注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

element.addEventListener(event, function, useCapture);
// 第三个参数是布尔值，是否为事件捕获，默认否（即冒泡）。此参数是可选的。

传递参数

当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

element.addEventListener("click", function(){ myFunction(p1, p2); });
// p1、p2 是实参，不能直接加到匿名函数上

冒泡与捕获

HTML DOM 中两种事件传播的方法

• 冒泡：最内侧元素的事件会首先被处理，然后是更外侧的
• 捕获：最外侧元素的事件会首先被处理，然后是更内侧的

移除事件监听

.removeEventListener() 方法轻松地删除事件监听器

element.removeEventListener("click",方法名)

IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不过，对于这些特殊的浏览器版本，您可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除