JavaScript事件处理

1、获得页面元素
在对事件进行处理之前，我们先简单了解一下如何获得页面中的某个特定元素，以便对该元素进行简单
的操作。
在html文档中，html元素都有一个id属性，JavaScript可以根据这一属性的值来定位，引用这个文档对
象，这样就可用JavaScript来操作这一页面元素了。这个方法就是： getElementById() 。
<input id="var" size="20"/>
<input type="button" value="增加长度" id="btnAdd">
<script language="JavaScript" type="text/javascript">
document.getElementById('btnAdd').onclick = function(){
var demo = document.getElementById("txtDemo");
demo.size += 10;
}
</script>

2、基础概念
1. 事件类型（event type）：web浏览器发生的事件有很多类型，不同的类型有着不同的信
息。"DOM3级事件"包含有：UI事件、焦点事件、滚轮事件、文本事件、鼠标事件、键盘事件、合
成事件、变动事件、变动名称事件等。在html中以属性的方式存在，存在形式：”on”连接一个事
件名。如onclick,onload等。
2. 事件目标（event target）：事件发起者（事件源），即发生事件时与之相关的对象。比如：页
面中的某个按钮，超连接，window,document等，都是最常见的事件目标对象。
3. 事件处理程序（event handler）：是处理或响应事件的函数，它也叫事件监听程序（event
listener）。应用程序通过指明事件类型和事件目标，在Web浏览器中注册它们的事件处理函数。

3、常见3种事件注册
1. HTML标签属性中事件绑定（DOM0级）
在html文档元素使用事件处理程序属性： “on”连接“事件名”组成，例如：onclick、onmouseover。这
种形式只能为DOM元素注册事件处理程序。

2. DOM中的纯js注册事件（DOM1级）
将html与js完全分离
语法：
对象.on事件类型 = js函数;
Js函数可以是匿名函数，也可以是已经定义的函数

3. DOM2中的绑定事件监听函数
使用 addEventListener() 或 attachEvent() 来绑定事件监听函数。addEventListener()是标准的绑定事
件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持
该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，
这种绑定事件的方法必须要处理浏览器兼容问题。

4、常见事件类型
JavaScript支持丰富的事件类型，能使Web开发更加快速和简洁。

JavaScript所支持的事件，常见有以下几类：
窗口事件 (Window Events)
表单元素事件 (Form Element Events)
键盘事件 (Keyboard Events)
鼠标事件 (Mouse Events)

窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
事件             说明
onload         当网页被载入时执行脚本。
onunload     当网页被关闭时执行脚本。

表单元素事件 (Form Element Events)
仅在表单元素中有效。
事件             说明
onchange    当元素（select 、复选框等）改变时执行脚本
onsubmit     当表单（form）被提交时执行脚本
onreset        当表单被重置时执行脚本
onselect      当元素被选取时执行脚本
onblur         当元素失去焦点时执行脚本
onfocus      当元素获得焦点时执行脚本

键盘事件 (Keyboard Events)
在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、
script、style 以及 title 元素。
事件                     说明
onkeydown          当键盘被按下时执行脚本
onkeypress        当键盘被按下后又松开时执行脚本，
                          但即按下 Ctrl、Alt、Shift、Meta
                          这样无值的键，这个事件不会触发。
onkeyup             当键盘被松开时执行脚本
常见相关事件属性：
key：字符串，当前按下的键，默认为空字符串。
code：字符串，表示当前按下的键的字符串形式，默认为空字符串。
location：整数，当前按下的键的位置，默认为0。
ctrlKey：布尔值，是否按下 Ctrl 键，默认为false。
shiftKey：布尔值，是否按下 Shift 键，默认为false。
altKey：布尔值，是否按下 Alt 键，默认为false。

鼠标事件 (Mouse Events)
在下列元素中无效：base、bdo、br、frame、frameset、head、html、iframe、meta、param、
script、style 以及 title 元素
事件                     说明
onclick                 当鼠标被单击时执行脚本
ondblclick              当鼠标被双击时执行脚本
onmousedown     当鼠标按钮被按下时执行脚本
onmousemove     当鼠标指针移动时执行脚本
onmouseout         当鼠标指针移出某元素时执行脚本
onmouseover      当鼠标指针悬停于某元素之上时执行脚本
onmouseup         当鼠标按钮被松开时执行脚本
click 事件指的是，用户在同一个位置先完成 mousedown 动作，再完成 mouseup 动作。因此，触发顺
序是， mousedown 首先触发， mouseup 接着触发， click 最后触发。
dblclick 事件则会在 mousedown 、 mouseup 、 click 之后触发。
mouseover 事件和 mouseenter 事件，都是鼠标进入一个节点时触发。两者的区别是， mouseenter 事
件只触发一次，而只要鼠标在节点内部移动， mouseover 事件会在子节点上触发多次

鼠标事件对象常用属性列表
screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
offsetX：数值，鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素）
offsetY：数值，鼠标位置与与目标节点上方的padding边缘的垂直距离。
ctrlKey：布尔值，是否同时按下了 Ctrl 键，默认值为false。
shiftKey：布尔值，是否同时按下了 Shift 键，默认值为false。
altKey：布尔值，是否同时按下 Alt 键，默认值为false。
metaKey：布尔值，是否同时按下 Meta 键，默认值为false。
button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件
没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。