当前位置:文档之家› 关于javascript事件

关于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 > 自定义鼠标右键菜单代码如下:。

相关主题