键盘按键事件的fireEvent

最新推荐文章于 2025-05-28 09:02:29 发布

jsrookie

最新推荐文章于 2025-05-28 09:02:29 发布

阅读量926

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/jsrookie/article/details/84805739

本文介绍了一种手动触发键盘事件的方法，适用于不同浏览器环境。详细解释了在IE、Firefox、Chrome、Safari和Opera中如何创建并初始化键盘事件对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近代码中有个功能需要用到手动触发键盘事件的功能，咱们的现有库对fireEvent的实现还比较单一，对键盘事件没有作支持，就自己封了一个。但键盘事件的fire在各浏览器下实现不一样，下面分别说明一下：

1. IE下没什么问题，创建事件对象、对对象的keyCode属性赋值，然后再抛出来就行了：

evtObj = document.createEventObject();
evtObj.keyCode=keyCode

el.fireEvent('on'+evtType, evtObj);

2. Firefox 需要通过document.createEvent创建KeyEvents对象，再通过initKeyEvent方法对事件对象初始化

evtObj = document.createEvent('KeyEvents');

evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );

3. Chrome/Safari/Opera

通过document.createEvent创建UIEvents对象，初始化后再在该对象上挂载按键值，Chrome和Opera可以先将keyCode属性delete掉后，再用Object.defineProperty方法重新为它赋值：

delete evtObj.keyCode;<br>Object.defineProperty(evtObj,"keyCode",{value:keyCode});

但是这里需要注意一点：Safari无法对对象的keyCode属性进行操作，强制覆盖里还会报错，解决方法是将键keyCode转为字符后挂在事件对象的key属性上：

evtObj.key=String.fromCharCode(keyCode);

通过这种方式绕开safari的坑后，在事件触发时的回调中再对keyCode进行一次适配即可：

var keyCode=evt.keyCode || evt.key.charCodeAt(0);

最后，封装好的function大概就是这样:

function fireKeyEvent(el, evtType, keyCode){

　　var evtObj;

　　if(document.createEvent){

　　　　if( window.KeyEvent ) {

　　　　　　evtObj = document.createEvent('KeyEvents');

　　　　　　evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );

　　　　} else {

　　　　　　evtObj = document.createEvent('UIEvents');

　　　　　　evtObj.initUIEvent( evtType, true, true, window, 1 );

　　　　　　delete evtObj.keyCode;

　　　　　　if(typeof evtObj.keyCode === "undefined"){

　　　　　　　　Object.defineProperty(evtObj,"keyCode",{value:keyCode});

　　　　　　}else{
　　　　　　　　evtObj.key=String.fromCharCode(keyCode);
　　　　　　}
　　　　}
　　　　el.dispatchEvent(evtObj);

　　}else if(document.createEventObject){
　　　　evtObj = document.createEventObject();
　　　　evtObj.keyCode=keyCode;

　　　　el.fireEvent('on'+evtType, evtObj);
　　}
}

完整事例：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>fireKeyEvent</title>
    </head>
    
    <body>
        <input type="text" id="txt1"/>
        <input type="button" id="btn1" value="fire"/>
        
        <script type="text/javascript">
            function $(id){
                return document.getElementById(id);
            }
            
            function addEvent(el, type, fn){
                if(document.addEventListener){
                    el.addEventListener(type, fn, true);
                }else if(document.attachEvent){
                    el.attachEvent("on"+type, fn);
                }else{
                    el["on"+type] = fn;
                }
            }
            
            
            function fireKeyEvent(el, evtType, keyCode){
                var evtObj;
                
                if(document.createEvent){
                    if( window.KeyEvent ) {
                        evtObj = document.createEvent('KeyEvents');
                        evtObj.initKeyEvent( evtType, true, true, window, false, false, false, false, keyCode, 0 );
                    } else {
                        evtObj = document.createEvent('UIEvents');
                        evtObj.initUIEvent( evtType, true, true, window, 1 );
                        delete evtObj.keyCode;
                       
                        if(typeof evtObj.keyCode === "undefined"){
                            Object.defineProperty(evtObj,"keyCode",{value:keyCode});
                        }else{
                            evtObj.key=String.fromCharCode(keyCode);
                        }
                    }

                    el.dispatchEvent(evtObj);
                    
                }else if(document.createEventObject){
                    evtObj = document.createEventObject();
                    evtObj.keyCode=keyCode
                    el.fireEvent('on'+evtType, evtObj);
               }
            }
            
            addEvent($("txt1"), "keydown" ,function(e){
                var evt=window.event || e;
                var keyCode=evt.keyCode || evt.key.charCodeAt(0);
                alert("keyCode:"+keyCode);
            })
            
            
            addEvent($("btn1"), "click", function(){
                fireKeyEvent($("txt1"), "keydown", 27);
            });
            
        </script>
    </body>
</html>