如何在JavaScript中触发事件？

我已使用

addEventListener

将事件附加到文本框。它很好用。当我想从另一个函数以编程方式触发事件时，出现了问题

我该怎么做呢？

您可以在IE 8或更低版本上使用，而W3C可以在大多数其他浏览器上使用。要创建要触发的事件，可以使用

createEvent

或

createEventObject

，具体取决于浏览器

下面是一段自解释的代码（来自原型），它在

元素上触发事件
dataavailable
：

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

一个有效的例子：

// Add an event listener
document.addEventListener("name-of-event", function(e) {
  console.log(e.detail); // Prints "Example of an event"
});

// Create the event
var event = new CustomEvent("name-of-event", { "detail": "Example of an event" });

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

有关较旧的浏览器和更复杂的示例，请参阅

请参阅和的支持表。
如果您使用jQuery，您可以简单地执行

$('#yourElement').trigger('customEventName', [arg0, arg1, ..., argN]);

然后用它来处理

$('#yourElement').on('customEventName',
   function (objectEvent, [arg0, arg1, ..., argN]){
       alert ("customEventName");
});

其中“[arg0，arg1，…，argN]”表示这些arg是可选的。
您需要的是如下内容：

document.getElementByClassName("example").click();

$(".example").trigger("click");

使用jQuery，它会是这样的：

document.getElementByClassName("example").click();

$(".example").trigger("click");

我使用JavaScript在mouseover上搜索了触发click、mousedown和mouseup事件。我找到了一个答案。要获得答案，请单击

单击是实时演示，下面是代码：

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

我只是使用了以下方法（似乎更简单）：

在这种情况下，只有当值真的发生了变化时才会触发事件，就像用户执行的正常聚焦轨迹丢失触发事件一样。
如果您支持IE9+，则可以使用以下命令。同样的概念也被纳入了这一概念


函数addEventListener（el、事件名称、处理程序）{
如果（el.addEventListener）{
el.addEventListener（事件名称、处理程序）；
}否则{
el.attachEvent（'on'+eventName，function（）{
处理程序调用（el）；
});
}
}
函数triggerEvent（el、事件名称、选项）{
var事件；
if（window.CustomEvent）{
事件=新的CustomEvent（事件名称、选项）；
}否则{
event=document.createEvent（'CustomEvent'）；
initCustomEvent（eventName、true、true、options）；
}
el.调度事件（事件）；
}
//添加事件侦听器。
addEventListener（文档“customChangeEvent”，函数（e）{
document.body.innerHTML=e.detail；
});
//触发事件。
triggerEvent（文档“customChangeEvent”{
详细信息：“在触发器上显示…”
});仅建议不需要手动调用侦听器事件的替代方案：

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

然后，您还可以在需要的任何其他地方调用该函数，以完成触发事件时所做的相同操作

我发现这个“代码密集型”更少，更容易阅读。
最有效的方法是直接调用已在
addEventListener注册的同一个函数

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

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

最后，一些元素，如
支持
.click（）
方法。
使用jquery事件调用。
在下面的一行中写下你想触发任何元素的变化

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

element_id是要触发其onChange的元素的id

避免使用

 element.fireEvent("onchange");

因为它的支持率很低。请参阅本文档，了解其。
修改@Dorian's以使用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);

小提琴：

另请参见：


这将立即触发事件“beforeinstallprompt”
如果您不想使用jQuery，也不特别关心向后兼容性，只需使用：

let element = document.getElementById(id);
element.dispatchEvent(new Event("change")); // or whatever the event type might be

请参阅文档和

编辑：根据您的设置，您可能需要添加
气泡：true
：

let element = document.getElementById(id);
element.dispatchEvent(new Event('change', { 'bubbles': true }));

你可以使用我一起编译的这个函数

if (!Element.prototype.trigger)
  {
    Element.prototype.trigger = function(event)
    {
        var ev;

        try
        {
            if (this.dispatchEvent && CustomEvent)
            {
                ev = new CustomEvent(event, {detail : event + ' fired!'});
                this.dispatchEvent(ev);
            }
            else
            {
                throw "CustomEvent Not supported";
            }
        }
        catch(e)
        {
            if (document.createEvent)
            {
                ev = document.createEvent('HTMLEvents');
                ev.initEvent(event, true, true);

                this.dispatchEvent(event);
            }
            else
            {
                ev = document.createEventObject();
                ev.eventType = event;
                this.fireEvent('on'+event.eventType, event);
            }
        }
    }
  }

触发以下事件：

var dest = document.querySelector('#mapbox-directions-destination-input');
dest.trigger('focus');

观看活动：

dest.addEventListener('focus', function(e){
   console.log(e);
});

希望这有帮助
 HTML

<a href="demoLink" id="myLink"> myLink </a>
<button onclick="fireLink(event)"> Call My Link </button>

您可以使用以下代码使用元素方法触发事件：

if (!Element.prototype.triggerEvent) {
    Element.prototype.triggerEvent = function (eventName) {
        var event;

        if (document.createEvent) {
            event = document.createEvent("HTMLEvents");
            event.initEvent(eventName, true, true);
        } else {
            event = document.createEventObject();
            event.eventType = eventName;
        }

        event.eventName = eventName;

        if (document.createEvent) {
            this.dispatchEvent(event);
        } else {
            this.fireEvent("on" + event.eventType, event);
        }
    };
}


if（！Element.prototype.triggerEvent）{
Element.prototype.triggerEvent=函数（eventName）{
var事件；
if（document.createEvent）{
event=document.createEvent（“HTMLEvents”）；
initEvent（eventName，true，true）；
}否则{
event=document.createEventObject（）；
event.eventType=eventName；
}
event.eventName=eventName；
if（document.createEvent）{
本次调度事件（事件）；
}否则{
this.firevent（“on”+event.eventType，event）；
}
};
}
var input=document.getElementById（“我的输入”）；
var button=document.getElementById（“我的按钮”）；
input.addEventListener（'change'，函数（e）{
警报（“触发更改事件”）；
});
按钮。addEventListener（'click'，函数（e）{
input.value=“再见世界”；
输入。触发事件（“变更”）；
});

更改输入
接受的答案对我不起作用，createEvent的答案都不起作用

最终对我起作用的是：

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

下面是一个片段：
const clickBtn=document.querySelector（'.clickme'）；
const viaBtn=document.querySelector（'.viame'）；
viaBtn.addEventListener（'click'，函数（事件）{
单击BTN.dispatchEvent(
新建MouseeEvent（'单击'{
泡泡：是的，
可取消：对，
视图：窗口，
}));
});
clickBtn.addEventListener（'click'，函数（事件）{
console.warn（`I是通过另一个按钮访问的！发生了${event.type}！`）；
});
点击我
通过我
别忘了只有IE版本前面有“on”（我一开始没注意到）变量
eventName
在这里包含什么？是的，可用的数据应该在eventName中，备忘录也应该定义（定义为{}是可以的）。Internet Explorer 9+处理createEvent和dispatchEvent，这个例子根本不起作用，请看我的答案：Mozilla有一篇很好的文章解释。希望有帮助！请将已接受的答案改为，这是最新的。@RickySt
targetElement.dispatchEvent(
    new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
}));