js 事件机制

事件处理

事件是指某一特定情况，在网页中，发生用户点击鼠标，用户按下按键等事件时往往要执行相应处理。js的事件机制用来解决这些问题。

DOM1定义的事件机制简单实用，且所有浏览器都支持，所以在一般情况下使用DOM1的事件机仍然是一个好的选择。

DOM1定义的事件机制中，通过在对象的事件属性上直接赋值回调函数来处理事件。当事件发生时回调函数会被调用，且this变量指向回调所属的对象。

若回调函数返回false将阻止该事件的默认处理方式（例如a标签点击事件默认将发生跳转）。

由于回调函数是赋值到对象属性的，所以在DOM1中一个对象的一个事件只能对应一个回调函数。（但可以通过一些技巧来使其支持多个回调函数）

事件属性名为on+事件名，全小写例如onclick。

要处理一个对象的鼠标点击事件则可以写成

node.onclick = function(evt){

alert("you click " + this.id);

return false;

};

//这段代码指示在用户点击node对象时弹出信息窗口显示node的id，并阻止node对象的默认点击事件处理。

窗口事件

onload 当用户进入页面且所有页面元素都完成加载时

onunload 当页面已经关闭时

onbeforeunload 但页面这要关闭时（例如用户点击了关闭按钮但页面还没有被关闭的时候）

onresize 当窗口大小调整时

onmove 当窗口移动时

onfocus 当窗口获得焦点时

onblur 当窗口失去焦点时

onscroll 当用户向上或向下滚动页面时

onDOMContentLoaded 当html文件加载完成时（onload是在html文件和图片等资源文件都加载完成的情况下才触发）

鼠标事件

onmousedown 鼠标按下

onmouseup 鼠标放开

onmousemove 鼠标移动

onmouseover 鼠标进入

onmouseout 鼠标离开

onclick 鼠标单击

表单事件

onsubmit 当表单提交（事件对象是表单不是提交按钮）

onreset 当表单重置（事件对象是表单不是重置按钮）

onchange 当控件更改

onselect 当控件选中

onclick 当空间点击

onfocus 当控件获得焦点

onblur 当控件失去焦点

按键事件

onkeydown 按键按下

onkeyup 按键松开

Event 对象

鼠标事件属性

altKey 返回当事件被触发时，"ALT" 是否被按下。

button 返回当事件被触发时，哪个鼠标按钮被点击。

clientX 返回当事件被触发时，鼠标指针的水平坐标。

clientY 返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。

metaKey 返回当事件被触发时，"meta" 键是否被按下。

relatedTarget 返回与事件的目标节点相关的节点。

screenX 返回当某个事件被触发时，鼠标指针的水平坐标。

screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

键盘事件属性

event.which DOM浏览器中使用，表示键的ASC码

event.keyCode IE浏览器中使用，表示键的ASC码

高级事件处理

（IE8及以下不支持）

node.addEventListener(type, callback); //添加一个事件监听，高级事件机制支持为一个对象的一个事件添加多个监听回调

node.removeEventListener(type, callback); //移除一个事件监听

node.dispatchEvent(event); //派发一个事件

document.createEvent("Event") //创建一个事件对象

event.initEvent(type) //初始化事件

event.stopPropagation() //让事件停止冒泡

event.preventDefault() //阻止事件的默认处理