【轉】使用js觸發事件

時間 2019-12-06

原文原文鏈接

若是你們將一張網頁當作一個form的話，大體上就成了一個web form的模型。在win form 下要想手動觸發某一個對象的事件是很簡單的，只要發送一條消息便可達成。(PostMessage) 可是網頁並非基於消息機制的，若是咱們想在一張網頁上寫出一個相似於按鍵精靈的功能該如何實現呢？
爲你們介紹js下的幾個方法：javascript

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'. html

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 ) java

3. 在初始化完成後就能夠隨時觸發須要的事件了，爲你們介紹targetObj.dispatchEvent(event)
使targetObj對象的event事件觸發
須要注意的是在IE 5.5+版本上請用fireEvent方法，仍是瀏覽兼容的考慮web

4. 例子
//例子1 當即觸發鼠標被按下事件瀏覽器

    var fireOnThis = document.getElementByIdx_x('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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。