关于javascript事件

A 事件流（event flow ）

事件模型分为两种：冒泡型事件、捕获型事件。

冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。

捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。

捕获型事件也被称作自顶向下（DOM层次）的事件模型。

由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。

B 事件监听

i > 通用监听方法

示例一：

给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。

ii > IE 中的监听方法

在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( )和detachEvent( )。

附加事件方法：[object].atta chEvent(“事件名”，方法名);

分离事件方法：[object].detachEvent(“事件名”，方法名);

如：o_p.detachEvent(“onclick”,click_A);

示例：

●使用这种方式可以为同一元素添加多个监听函数；

●在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；

●在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；

iii > 标准DOM 的监听方法

在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( )和removeEventListener( )。

添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型);

移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型);

注意：

这里的“事件名”不能带on ，如：click（如果是onclick 则错误！）

“事件模型”为boolean 类型，通常设置为false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）

示例：

注意：

●使用这种方式同样可以为同一元素添加多个监听函数；

●在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；

●在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；

C 事件对象

i > 在IE 浏览器中，事件对象是window 对象的一个属性event 。访问方式如下：

ii > 在标准的DOM 中，事件对象是作为处理函数的唯一参数来获得。访问方式如下：

注意：

在IE 浏览器中，获得触发事件的对象源（HTML标签）是通过event 对象的srcElement属性；

在标准的DOM 中，获得触发事件的对象源（HTML标签）是通过event 对象的target属性；

获取事件目标的示例：

i > 关于keyCode属性和charCode 属性

keyCode属性：表示键盘按键码。因此输入“a”字母和“A”字母时，都是显示键盘码65 ；charCode 属性：表示输入字符码。因此输入“a”字母和“A”字母时，

分别显示97（a 字符码）和65（A 字符码）；

注意：

在标准的DOM 中：既有keyCode属性，还有charCode 属性。

但在标准的DOM 中，keypress 事件中keyCode 属性值始终为0 值；

在IE 浏览器中：事件对象只有keyCode属性，没有charCode 属性。

但在IE 浏览器中，keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值；

示例代码：

方法一：

通过鼠标事件中，判断event 对象的button 属性值为“2”来屏蔽鼠标右键。虽然这种方法在IE 浏览器中有效，但在标准的DOM 中无效。并且，鼠标事件中，button 属性的值在IE 浏览器和标准的DOM 中大部分都不相同！

方法二：

其实，点击鼠标右键会触发右键菜单contextmenu 事件。

所以，屏蔽鼠标右键最有效的办法就是屏蔽document 对象的contextmenu 事件。

代码如下：

标准DOM 是通过preventDefault( ) 方法屏蔽右键菜单；

iii > 自定义鼠标右键菜单代码如下：