js手动触发事件dispatchEvent()

我不是女神ヾ 2022-03-22 15:56 918阅读 0赞

如果大家将一张网页看成一个form的话，大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的，只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的，如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢？  
为大家介绍js下的几个方法：(jquery使用trigger()触发事件)

**1. createEvent（eventType）**  
参数：eventType 共5种类型：

*  Events ：包括所有的事件. 
 *  HTMLEvents：包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select',  'submit', 'unload'. 事件
 *  UIEvents ：包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.间接包含 MouseEvents. 
 *  MouseEvents：包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'. 
 *  MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument',  'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

**2. 在createEvent后必须初始化，为大家介绍5种对应的初始化方法**

*    HTMLEvents 和 通用 Events：initEvent( 'type', bubbles, cancelable )
 *  UIEvents ：initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
 *  MouseEvents：initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
 *  MutationEvents ：initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange )

**3. 在初始化完成后就可以随时触发需要的事件了，为大家介绍targetObj.dispatchEvent(event)  
    使targetObj对象的event事件触发**  
  需要注意的是在IE 5.5+版本上请用fireEvent方法，还是浏览兼容的考虑

**4. 例子**

//例子1  立即触发鼠标被按下事件
    var fireOnThis = document.getElementById('someID');
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
    fireOnThis.dispatchEvent(evObj);
    
    //例子2  考虑兼容性的一个鼠标移动事件
    var fireOnThis = document.getElementByIdx_x('someID');
    if( document.createEvent ) 
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initEvent( 'mousemove', true, false );
        fireOnThis.dispatchEvent(evObj);
    } else if( document.createEventObject ) {
        fireOnThis.fireEvent('onmousemove');
    }

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title></title>
        
    </head>
    <body>
    
        <div id="a" onclick="alert(1);">321321</div>
        
        <script type="text/javascript">
            /**
             * 1. createEvent(eventType)
             * 参数： eventType 共5种类型
             * Events : 包含所有的事件
             * HTMLEvetns : 'abort','blur','change','error','focus',
             *              'load','reset','resize','scroll','select',
             *              'submit','unload'
             * UIEvents :'DOMActivate','DOMFocusIn','DOMFocusOut','keydown','keypress','keyup'
             * MouseEvents : 'click','mousedown','mousemove','mouseout','mouseover','mouseup'
             * MutationEvents :'DOMAttrModified','DOMNodeInserted','DOMNodeRemoved','DOMCharacterDataModified',
             *                         'DOMNodeInsertedIntoDocument','DOMNodeRemovedFromDocument','DOMSubtreeModified'
             */
            /**
             * 2. 在 createEvent 后必须初始化，为大家介绍5种对应的初始化方法
             * HTMLEvents 和 通用 Events
             *         initEvent('type',bubbles,cancelable)
             * UIEvents
             *         initUIEvent('type',bubbles,cancelable,windowObject,detail)
             * MouseEvents
             *         initMouseEvent('type',bubbles,cancelable,windowObject,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget)
             * MutationEvents
             *         initMutationEvent('type',bubbles,cancelable,relatedNode,prevValue,newValue,attrName,attrChange)
             */
            /**
             * 在初始化完成后就可以随时触发需要的事件了，为大家介绍targetObj.dispatchEvent(event)
             * 使targetObj对象的event事件触发
             * 需要注意的是在IE5.5+版本上请用fireEvent方法，还是浏览器兼容的考虑
             */
            
            // 立即触发鼠标按下事件
            var fireOnThis = document.getElementById('a');
            var evObj = document.createEvent('MouseEvents');
            evObj.initMouseEvent('click',true,true,window,1,12,345,7,220,false,false,true,false,0,null);
            fireOnThis.dispatchEvent(evObj);
        </script>
    
    </body>
    </html>