美文网首页
JS触发事件(trigger的实现)

JS触发事件(trigger的实现)

作者: 利312 | 来源:发表于2017-02-13 15:38 被阅读820次

参考 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(); 
    }
}

相关文章

  • JS触发事件(trigger的实现)

    参考 https://developer.mozilla.org/en-US/docs/Web/Guide/Eve...

  • jQuery事件自动触发

    事件自动触发 trigger()和triggerHandler() trigger() triggerHandle...

  • jQuery学习:事件移除、解绑/阻止冒泡、默认行为/each方

    移除事件绑定 触发事件触发p的点击事件$("p").click();$("p").trigger("click")...

  • 16-事件

    只能用button绑定 trigger 触发事件 可以触发原始事件 也可以触发自定义事件 事件冒泡 event.s...

  • 谨记。。。

    trigger() 方法触发被选元素的指定事件类型。

  • js 常用方法

    call: trigger()定义和用法:方法触发被选元素的指定事件类型。 触发事件$(selector).tri...

  • jQuery3

    一、事件代理/事件委托es5的事件委托 二、trigger触发事件:主动触发事件 三、动画hide(time, c...

  • jQuery自定义事件,事件冒泡,节点

    主动触发与自定义事件 主动触发 使用jquery对象上的trigger方法来触发对象上绑定的事件。 自定义事件 除...

  • 绑定事件bind

    click 主动触发与自定义事件 主动触发 可使用jquery对象上的trigger方法来触发对象上绑定的事件。 ...

  • SQL触发器

    定义 触发器(TRIGGER)是由事件来触发某个操作。这些事件包括INSERT语句、UPDATE语句和DELETE...

网友评论

      本文标题:JS触发事件(trigger的实现)

      本文链接:https://www.haomeiwen.com/subject/nxwzittx.html