js学习小结（十四）2014.5.23（keyboard事件，mouseEvent事件event的相关属性，ie事件注册的N中方式）

来源：互联网发布：手机版淘宝好评能改吗编辑：程序博客网时间：2024/05/16 16:12

1.keyboard事件

主要有三个事件：keydown，keyup，keypress。

如果三个事件都注册了，那么一般的触发顺序是keydown--> keypress---> keyup。

keypress：只有当在文本框里输入字符（包括数字、英文字母，回车符，各种符号）时会触发，如果采用中文输入法输入中文时，不会触发keypress事件。可以通过charCode获取按下键的ASCII值。

keydown和keyup：这是一对事件，无论按下什么键（无论是字符还是非字符）都会触发该这对事件。通过keyCode，会返回按下键的对应的大写字母的ASCII值。

注意：keydown和keypress都是在文本框内容变化之前触发的，而keyup是在文本框内容变化之后触发的。

<body><textarea id='tt' cols='20' rows='20'></textarea><input  type='text' id='text'/><script type="text/javascript" src='../js/JSEvent.js'></script><script type="text/javascript">var tt=document.getElementById('tt');EventUtil.addEventHandler(tt,'keyup',function(e){e=EventUtil.getEvent(e);//console.log(EventUtil.getCharCode(e));console.log("keyup is triggered:"+e.keyCode+"  " +String.fromCharCode(e.keyCode));});EventUtil.addEventHandler(tt,'keydown',function(e){e=EventUtil.getEvent(e);//console.log(EventUtil.getCharCode(e));console.log("keydown is triggered:"+e.keyCode+"  " +String.fromCharCode(e.keyCode));});EventUtil.addEventHandler(tt,'keypress',function(e){e=EventUtil.getEvent(e);//console.log(EventUtil.getCharCode(e));console.log("keypress is triggered:"+EventUtil.getCharCode(e)+"  " +String.fromCharCode(EventUtil.getCharCode(e)));});   </script></body>

2.mouseEvent事件

（1）对于mouseover和mouseout事件，标准DOM中可以通过relatedTarge属性获取相关元素，IE中，可以通过fromElement toElement获取相关元素。

（2）对于mouse的click事件可以通过button属性，获得使用鼠标点击时，是点击了鼠标左键还是右键还是中间的键。在标准DOM中，通过event的button属性，获取点击键的信息，event.button=0,表示按了鼠标左键，event.button=1,表示按下了鼠标右键，event.button=2，表示按下了中间键。在ie中，这个值返回得更加复杂，但是使用标准MouseEvent完全够了。所以使用了一下方法封装：

getButton:function(e){if(document.implementation.hasFeature('MouseEvents','2.0')){return event.button;}else{switch(event.button){case 0:case 1:case 3:case 5:case 7:    return 0;case 2:case 6:return 2;case 4:    return 1;}}}

（3）对于鼠标的滚轮事件，特别的是opera低版本中的表示的scroll

0 0