js學習小結（十四）2014.5.23（keyboard事件，mouseEvent事件event的相關屬性，ie事件註冊的N中方式）
阿新 • • 發佈：2019-01-30
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