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

我该怎么做呢?


当前回答

使用jquery事件调用。 写下面的行,你想触发任何元素的onChange。

$("#element_id").change();

element_id是要触发其onChange的元素的ID。

避免使用

 element.fireEvent("onchange");

因为它的支撑力非常小。请参阅本文档以获得其支持。

其他回答

我只是使用了以下方法(似乎更简单):

element.blur();
element.focus();

在这种情况下,只有当值真的发生改变时才会触发事件,就像由用户执行的正常焦点轨迹丢失会触发它一样。

我使用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);
    }
};

值得注意的是,我们可以创建任何类型的预定义事件,并在任何地方收听。

我们并不局限于经典的内置事件。

在这个基本示例中,自定义事件interfacebuiltsuccessuserdefinedevent每3秒在self.document上分派一次

self.document。addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false) setInterval(() =>{//测试 self.document。dispatchEvent(新事件(interfacebuiltsuccessuserdefinedevent)) }, 3000) //测试

有趣的事实:元素可以侦听尚未创建的事件。

修改@Dorian对IE工作的回答:

document.addEventListener("my_event", function(e) {
  console.log(e.detail);
});

var detail = 'Event fired';

try {

    // For modern browsers except IE:
    var event = new CustomEvent('my_event', {detail:detail});

} catch(err) {

  // If IE 11 (or 10 or 9...?) do it this way:

    // Create the event.
    var event = document.createEvent('Event');
    // Define that the event name is 'build'.
    event.initEvent('my_event', true, true);
    event.detail = detail;

}

// Dispatch/Trigger/Fire the event
document.dispatchEvent(event);

小提琴:https://jsfiddle.net/z6zom9d0/1/

参见: https://caniuse.com/#feat=customevent

最有效的方法是直接调用已经注册到addEventListener的相同函数。

您还可以使用CustomEvent和co触发一个假事件。

最后,一些元素如<input type="file">支持.click()方法。