js学习笔记4-事件和事件处理

1. 总述：

本章将讲三种完全不同的不兼容的事件处理模型：

1.1 原始事件模型

这是一种简单的事件处理模式，我们可以非正式地把它看作是0级DOM API的一部份内容，所有的启用了js的浏览器都支持它，因此用它不用考虑浏览器的兼容性。

1.2 标准事件模型

这是一种强大的具有完整性的事件模型，2级DOM对它进行了标准化，除了IE外的所有浏览器都支持它。

1.3 IE事件模型

它具有标准事件模型的许多特征，但不具有全部特征，所以，必须为IE浏览器编写特定的代码来解决兼容性的问题。

2.原始基本事件模型

原始基本事件模型在我们的代码中很常用了，这里就简单地介绍下，首先说说事件句柄。

事件句柄像onclick、onmouseover等都很常用了，以下几个句柄需要再熟悉一下：

onkeyup//如在下拉提示框中就有用到：输入一个字符后onkeyup事件被执行，这刚好是提示所需要的。（关于下拉提示框的相关说明见另一篇blog文章）
onblur//失去焦点，这在当一个元素输入完后离开元素时对元素的输入值有效性进行判断很常用
onfocus//当一个元素得到焦点时触发，这在在鼠标刚刚点击元素获得焦点时用到
onchange//这是select下拉框的option选择时触发，注意，选择option时不是触发onclick，而是onchange，这点易混
onresize//在窗口大小变化时触发。如gis的地图当窗口大小变化时，一些热点元素要重新画等。
onsubmit//这个句柄常用，注意的是如果不你想让form提交，可以把onsubmit设置为false，则不会自动提交。

 
对于事件句柄的常用做法，我们常常把函数赋值给事件句柄的方式，如下：

e.onclick = function(){}

 
或者：

function a(){}
e.onclick = a

 
注意上面的第二种写法，e.onclick = a后面的a没有括号，也就是我们是把函数自身a赋值给onclick句柄，而不是函数的执行结果赋值给句柄，所以没有括号。
有的时候，比如一个元素的句柄其它开发人员已经写好了，如果我们想在后面加上我们自己要处理的事情，可以先把原先的句柄函数备份起来，再执行新的函数，如下：

var oldHandle = e.onclick;
function newHandle(){}
e.onclick = {
    oldHandle();
    newHandle();
}

 
这样，就可以兼容其它人写的代码，并执行我们要的新代码了。

3. 标准事件模型
4. IE的事件模型

4.1 IE Event对象：

ie的event对象是一个很重要的对象，因为所有的应用开发都与用户的操作事件有关联。event对象的重要属性如下：

*srcElement

*cancelBubble

true可以阻止当前事件进一步起泡到包容层次的元素。它与DOM的stopPropagation()方法相同。这个属性很常用，可常与returnValue属性一起用。比如一个grid的行，要起它的右键菜单，就要先设置returnValue,再设置cancelBubble。

cancelBubble只适用于当前事件，如果有新的event事件，则cancelBubble会自动还原为默认值false。

*returnValue

设置为false可以阻止浏览器执行与事件相关的默认动作。很经常地与上面的cancelBubble一起用。它与DOM的preventDefault()方法相同。

*ClientX,ClientY

指的是事件发生时的鼠标坐标（注意是鼠标坐标），这个坐标是相对于窗口的左上角的，因为是文档坐标，所以对于比窗口大的文档，两个坐标值与文档的位置不一样，需要把窗口坐标转化为文档坐标，需要添加一个文档的滚动值。

*shiftKey,ctrlKey,altKey

事件发生时是否按住了shift、ctrl、alt键。

*button

指的是鼠标事件中是点击了左键（1）还是右键（2）还是中键（3）。

*keyCode

指明keydown和keyup事件的键代码及keypress事件的Unicode字符。

 

ie的event是全局变量：

因为我们一次只能处理一个事件，从来不会并发处理两个事件，所以，用全局变量来存放event是安全的。

IE的event对象是全局变量与2级DOM事件模型不兼容，可以用如下代码来解决：

var e = event||window.event

 

4.2 IE事件句柄的注册

IE事件句柄的注册用attachEvent()和detachEvent()方法，它们比较常用。比如有很多元素，不需要一个个去写onclick事件，只需要在js里写个循环，attachEvent("onclic",function(){});

它们与DOM的addEventListener()和removeEventListener()方法相似。

4.3 捕获鼠标事件

捕获鼠标事件对于如拖放元素等操作很重要。捕获鼠标事件主要是通过setCapture()和releaseCapture()来实现。当一当一个元素setCapture()后，所有的后续操作都引导到这个元素上，并且这个元素的所有句柄（如onclick\onmouseover等）都可以在起泡前处理它们。但我们一般是在setCapture()后，接着是对mousedown事件来做响应，以保证后续的mouseover事件能够被同一元素接收。元素执行拖动操作后调用releaseCapture()来响应一个mouseup事件。

5.鼠标事件

鼠标事件涉及到两个知识点：一个是鼠标的位置；另一个是鼠标的捕获事件。分别用一个tip例子和一个drag例子代码来说明。这两个例子将以单独文章的形式发布。