我已经使用addEventListener将事件附加到文本框。它工作得很好。当我想从另一个函数以编程方式触发事件时,问题就出现了。

我该怎么做呢?


当前回答

接受的答案不适合我,createEvent的都不行。

最后对我有用的是:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

Here’s a snippet: const clickBtn = document.querySelector('.clickme'); const viaBtn = document.querySelector('.viame'); viaBtn.addEventListener('click', function(event) { clickBtn.dispatchEvent( new MouseEvent('click', { bubbles: true, cancelable: true, view: window, })); }); clickBtn.addEventListener('click', function(event) { console.warn(`I was accessed via the other button! A ${event.type} occurred!`); }); <button class="clickme">Click me</button> <button class="viame">Via me</button>

从阅读: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

其他回答

function fireMouseEvent(obj, evtName) {
    if (obj.dispatchEvent) {
        //var event = new Event(evtName);
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent(evtName, true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
        obj.dispatchEvent(event);
    } else if (obj.fireEvent) {
        event = document.createEventObject();
        event.button = 1;
        obj.fireEvent("on" + evtName, event);
        obj.fireEvent(evtName);
    } else {
        obj[evtName]();
    }
}

var obj = document.getElementById("......");
fireMouseEvent(obj, "click");
var btn = document.getElementById('btn-test');
var event = new Event(null);

event.initEvent('beforeinstallprompt', true, true);
btn.addEventListener('beforeinstallprompt', null, false);
btn.dispatchEvent(event);

这将立即触发一个事件'beforeinstallprompt'

我使用JavaScript搜索了鼠标悬停时的触发点击,鼠标下拉和鼠标上拉事件。我找到了胡安·门德斯提供的答案。点击这里获取答案。

点击这里是现场演示,下面是代码:

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);
    }
};

只是建议一个不需要手动调用监听器事件的替代方案:

无论您的事件侦听器做什么,都要将其移动到一个函数中,并从事件侦听器调用该函数。

然后,您还可以在需要完成与事件触发时相同的事情的其他任何地方调用该函数。

我发现这种方法不那么“代码密集”,也更容易阅读。

接受的答案不适合我,createEvent的都不行。

最后对我有用的是:

targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));

Here’s a snippet: const clickBtn = document.querySelector('.clickme'); const viaBtn = document.querySelector('.viame'); viaBtn.addEventListener('click', function(event) { clickBtn.dispatchEvent( new MouseEvent('click', { bubbles: true, cancelable: true, view: window, })); }); clickBtn.addEventListener('click', function(event) { console.warn(`I was accessed via the other button! A ${event.type} occurred!`); }); <button class="clickme">Click me</button> <button class="viame">Via me</button>

从阅读: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent