JS触发事件(trigger的实现)

参考 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events,https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill,https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent;

关键点(是存在兼容性问题,IE下不一样)
dom监听事件后,使用 dispatchEvent 或者 fireEvent 来调用触发事件;
stackoverflow上有一段代码:

function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9) {
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

    if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
        case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
        case "mousedown":
        case "mouseup":
            eventClass = "MouseEvents";
            break;

        case "focus":
        case "change":
        case "blur":
        case "select":
            eventClass = "HTMLEvents";
            break;

        default:
            throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
            break;
        }
        var event = doc.createEvent(eventClass);

        var bubbles = eventName == "change" ? false : true;
        event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else if (node.fireEvent) {
        // IE-old school style
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

当然大多情况下,只会是触发click事件,所以可以用下面的代码

function triggerClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    aimaile阅读 22,801评论 6 422
  • 持续更新地址:https://blog.my-eclipse.cn/host-google.html 93.184...
    AlisaMfz阅读 2,588评论 0 10
  • 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前...
    Midaoi阅读 4,103评论 6 105
  • 演讲就是一次派发礼物的过程 演讲时唯一能够令你放松的方法,是把演讲当做派发礼物的过程 高效沟通的三件事: 演讲内容...
    子龙三国阅读 218评论 0 0
  • 卢大师要荣归故里了,部门聚餐为他送行。说起卢大师,不得不竖起大拇指,在我看来,他是典型的理工科男,智商极高,情商嘛...
    雨霁飄塵阅读 31评论 0 0