js事件汇总

JS事件汇总

1. js事件

　　1.1 onclick　　点击事件

　　1.2 onload　　用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）

　　1.3 onunload　　用户离开某个页面的时候触发（onload 和 onunload 事件可用于处理 cookie。）

　　1.4 onchange　　内容变化事件（常结合对输入字段的验证来使用）

　　1.5 onmouseover　　鼠标移动到HTML元素上方的事件

　　1.6 onmouseout　　鼠标移出HTML元素上方的事件

　　1.7 onmousedown　　鼠标按下的时候触发的事件

　　1.8 onmouseup　　鼠标弹起触发的事件（onmousedown，onmouseup和onclick区别，onclick是鼠标完成点击事件的时候触发的事件）

　　1.9 onfocus　　元素获取焦点事件

　　1.10 onblur　　元素失去焦点事件

　　1.11 onabort　　图像的加载失败

　　1.12  ondblclick　　双击事件

　　1.13 onerror　　当加载图像和文档时发生错误

　　1.14 onkeydown　　键盘按键被按下发生的事件

　　1.15 onkeyup　　键盘按键被松开发生的事件

　　1.16 onkeypress　　键盘按键按下并松开发生的事件

　　1.17 onmousemove　　鼠标移动

　　1.18 onresize　　窗口或者框架被重新调整大小

　　1.19 onselect　　文本被选中

　　1.20 onreset　　重置按钮被点击

　　1.21 onsubmit　　提交按钮被点击

(阻止事件冒泡：ie使用 e.cancleBubble = true、e.stopPropagation()； 取消默认事件： e.preventDefault()，IE则是使用e.returnValue = false )

在JavaScript中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定；
2. 在JavaScript代码中绑定；
3. 绑定事件监听函数。

   一. 在DOM元素中直接绑定

   这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
       onXXX="JavaScript Code"

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

三. 绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

注意：事件句柄函数是指“ 函数名 ”，不能带小括号。