在javascript中手动执行事件[重复]答案

【问题标题】：do events manually in javascript [duplicate]在javascript中手动执行事件[重复]
【发布时间】：2014-06-11 23:32:37
【问题描述】：

是否可以手动执行 DOM 事件？比如你有一个链接，想通过代码调用它的默认事件函数：

<a href="one.html" id="a">main page<\a>

document.getElementById("a").onclick();

【问题讨论】：

你不能。获取 href 并使用 window.location 跟踪 URL。
错了，你可以。查看标记的副本。
@Hamish stackoverflow.com/questions/1421584/…。超链接不是事件。
对，一个更好的骗子。投票结束，而不是:)
Window.location 不适用于 javascript 代码

标签： javascript

【解决方案1】：

查看initMouseEvent

在鼠标事件创建后初始化它的值（通常使用 document.createEvent 方法。

Live Demo

var event = document.createEvent("MouseEvents"),
    anchor = document.querySelector('a');

event.initMouseEvent("click", true, 
                     true, window, 0,
                     0, 0, 0, 0, false,
                     false, false, false,0, null);

anchor.dispatchEvent(event);

Example provided by MDN as well

【讨论】：

【解决方案2】：

您可以按照以下方式进行操作

document.getElementById("a").onclick=function(){f1()};
function f1()
       {
   document.getElementById("demo").innerHTML=3;
       }

【讨论】：

【解决方案3】：

使用如下触发事件

var triggerEvent = function (element, name, data) {
var event;
if (window.CustomEvent) {
    event = new CustomEvent(name, {
        detail: data || {},
        bubbles: true,
        cancelable: true
    });
} else {
    event = document.createEvent("Event");
    event.initEvent(name, true, true);
    event.detail = data;
}
element.dispatchEvent(event);
 };

你会像使用它一样

 triggerEvent(input, 'change', {changedText : "Custom data here in this Object"}

根据配置，您可能会遇到以下错误

Refused to display 'https://www.some.com/?gfe_rd=cr&ei=50JbU_yHKdGQiAec9IH4Bg' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

【讨论】：

【解决方案4】：

jQuery 会在这里很好地做你想做的事：

http://api.jquery.com/click/

$("#a").click();

这将自动调用附加到匹配元素的 href 和 dom 事件。

【讨论】：

投了反对票，因为如果用户想要一个 jQuery 解决方案，他们会要求或标记它。
我不同意。问题是“是否可以手动执行 DOM 事件”，我链接到一个“通过代码”完成该解决方案的解决方案。由于缺少示例，而不是 jquery 解决方案，我会否决答案
这里关于 SO 的约定是，如果问题中没有特别提到该库，则不要使用 jQuery（或任何其他库）提供答案。
请随意在 cmets 中推荐 jQuery，但“使用 jQuery”的答案会稀释 SO 对于 vanilla javascript 问题的价值。