关于JavaScript 的事件[下]

C 事件对象

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

 
   function getEvent(){
 var o_event = window.event; 
}

event 对象在事件发生时被访问，执行完函数后就消失了。

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

 
   function getEvent(_event){
 var o_event = _event
}

因此，为了兼容各种浏览器，通常采用如下方法：

 
   function getEvent(_event){
 // Firefox下参数_event 就是event对象  
 
 // IE 下获得 event对象  
 if(window.event)_event = window.event; 
 
 // 显示触发的事件名称 
 alert(_event.type); 
}

下面列出了事件常用的几个属性和方法（区别）：

IE	标准DOM	说明
cancelBubble	cancelBubble	是否冒泡(标准DOM中只读)
无	stopPropagation( )	阻止事件向上冒泡的方法
无	charCode	按下按键的Unicode 值
keyCode	keyCode	IE 中keypress 事件时表示按键的Unicode 值；标准DOM 中keypress 事件时为0；其余情况下，keyCode 为按键的数字代号。
srcElement	target	触发事件的元素(对象源)
type	type	事件的名称

此处只列出了事件成员的一小部分。

注意：

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

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

获取事件目标的示例：

 
   <html> 
 <head> 
 <title>事件的目标</title> 
<script language="javascript">
 function handle(oEvent){
 //处理兼容性，获得事件对象
 if(window.event) oEvent = window.event;
 
 var oTarget;
 //处理兼容性，获取事件目标
 if(oEvent.srcElement)
 oTarget = oEvent.srcElement;
 else oTarget = oEvent.target;
 
 //弹出目标的标记名称
 alert(oTarget.tagName); 
}
window.onload = function(){
 var obj = document.getElementsByTagName("a")[0];
 obj.onclick = handle;
}
</script>
 </head> 
 <body> 
 <a href="#">获得事件源的示例</a> 
 </body> 
 </html> 

 

D 键盘事件

事件	说明
keydown	按下键盘上的某个键触发。（一直按住某键则会持续触发）
keypress	按下某个按键并产生字符时触发。（即忽略Shift 、Alt 、Ctrl 等功能键）
keyup	释放某个按键时触发。

触发的顺序为：keydown ---> keypress ---> keyup

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 属性的值；

示例代码：

 
   <html> 
 <head> 
 <title>键盘事件</title> 
<script language="javascript">
 function handle(oEvent){
 
 if(window.event){
 //处理兼容性，获得事件对象
 oEvent = window.event;
 
 //设置IE的charCode值
 oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
 }
 var oDiv = document.getElementById("display");
 //输出测试
 oDiv.innerHTML += oEvent.type // 事件名称
 + ": charCode:" + oEvent.charCode // 字符码 charCode
 + " keyCode:" + oEvent.keyCode + "<br>"; // 键盘码 keyCode
}
window.onload = function(){
 var oTextArea = document.getElementsByTagName("textarea")[0];
 oTextArea.onkeypress = handle;
 oTextArea.onkeydown = handle;
}
</script>
 </head> 
 <body> 
 <textarea rows="4" cols="50"></textarea> 
 <div id="display"></div> 
 </body> 
 </html> 

 

ii > 屏蔽鼠标右键

方法一：

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

方法二：

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

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

代码如下：

 
   <html> 
 <head> 
 <title>屏蔽鼠标右键</title> 
<script language="javascript">
 function block(oEvent){
 if(window.event){
 oEvent = window.event;
 
 // IE 取消默认事件
 oEvent.returnValue = false;
 }
 else 
 // Firefox 取消默认事件
 oEvent.preventDefault();
}
// 右键菜单事件
document.oncontextmenu = block;
</script>
 </head> 
 <body> 
 <p>屏蔽鼠标右键</p> 
 </body> 
 </html> 

 

IE 浏览器是通过returnValue 属性屏蔽右键菜单；

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

iii > 自定义鼠标右键菜单

代码如下：

 
   <html> 
 <head> 
 <title> demo </title> 
 <meta name="Author" content="xugang" /> 
 <script type="text/javascript"> 
 <!-- 
 // 一、屏蔽系统右键菜单
 window.document.oncontextmenu = function(_event){
 if (window.event){
 _event = window.event;
 window.event.returnValue=false;
 window.event.cancelBubble=true;
 }
 else _event.preventDefault();
 }
 
 //二、添加自定义右键菜单
 window.document.onmouseup = function(_event)
 {
 var myDIV = document.getElementById("myDIV");
 // 浏览器兼容性
 if (window.event)_event = window.event;
 
 // 鼠标右键
 if(_event.button == 2)
 {
 // _event.clientX 获得鼠标当前的 X 坐标
 /* 注意： 
         _event.clientX 的值在标准的DOM 中“只读” 
         myDIV.style.pixelLeft 不是标准的DOM 属性 
      */ 
 myDIV.style.left = _event.clientX;
 myDIV.style.top = _event.clientY;
 myDIV.style.display = "block";
 }
 // 不是鼠标右键
 else myDIV.style.display = "none"; 
 }
 //--> 
 </script> 
 </head> 
 <body> 
 <!-- 我的右键菜单 --> 
 <div id="myDIV" style="position:absolute; height:180px; width:200px;  
       background-color:#CCCCCC; display:none;"> 
     <a href="http://xugang.cnblogs.com" target="_blank">xugang</a> 
 </div> 
 </body> 
 </html> 

 

在IE 浏览器和标准DOM 下兼容。

本文转自钢钢博客园博客，原文链接：http://www.cnblogs.com/xugang/archive/2010/08/09/1795612.html，如需转载请自行联系原作者

相关文章：