logo标签列表

如何在JavaScript中触发事件？

javascripteventstriggersaddeventlistenerdom-events
681

我使用addEventListener为文本框附加了一个事件，它可以正常工作。但当我想要从另一个函数中编程触发该事件时，出现了问题。

我应该如何做呢？

2
请将已接受的答案更改为此，它更加更新。 - Michał Perłakowski
2
@RickyStam 看起来那篇 MDN 文章已经 移动到这里。 - styfle
19个回答
3
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");
1
此内容已过时，仅适用于填充。https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent - hipkiss
1
您可以使用我编译的这个函数。
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);
});

希望这可以帮到你！
1
值得注意的是，我们可以创建任何类型的预定义事件，并从任何地方监听它们。我们不仅限于经典的内置事件。在这个基本示例中，每3秒钟在self.document上触发一个自定义事件interfacebuiltsuccessuserdefinedevent。 

self.document.addEventListener('interfacebuiltsuccessuserdefinedevent', () => console.log("WOW"), false)

setInterval(() => {  // Test
  self.document.dispatchEvent(new Event('interfacebuiltsuccessuserdefinedevent')) 
}, 3000 ) // Test

有趣的事实：`元素`可以监听尚未创建的事件。
1
您可以使用以下代码使用Element方法触发事件：
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 = 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);
        }
    };
}

var input = document.getElementById("my_input");
var button = document.getElementById("my_button");

input.addEventListener('change', function (e) {
    alert('change event fired');
});
button.addEventListener('click', function (e) {
    input.value = "Bye World";
    input.triggerEvent("change");
});
<input id="my_input" type="input" value="Hellow World">
<button id="my_button">Change Input</button>

0
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'的事件

0

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

您还可以使用CustomEvent等触发虚假事件。

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

-2

HTML

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

JS

// click event listener of the link element --------------  
document.getElementById('myLink').addEventListener("click", callLink);
function callLink(e) {
    // code to fire
}

// function invoked by the button element ----------------
function fireLink(event) {                   
    document.getElementById('myLink').click();      // script calls the "click" event of the link element 
}
-3
使用jQuery事件调用。 在您想要触发任何元素的onChange时，编写下面的代码行。
$("#element_id").change();

element_id 是您想要触发其 onChange 事件的元素的 ID。

避免使用

 element.fireEvent("onchange");

因为它的支持非常少。请参考此文档了解其支持情况。

-11
你想要的是这样的东西：
document.getElementByClassName("example").click();

使用 jQuery，代码可能是这样的：
$(".example").trigger("click");
触发方法没有问题，但它是一个jQuery方法。 - Kamuran Sönecek
2
  1. document.getElementByClassName 不存在。
  2. document.getElementsByClassName 存在，但返回一个列表。
  3. 这仅适用于少数几个本地事件。
  4. 最后一个示例触发了一个 jQuery 事件，其中不存在基础本地事件。
 - Glenn Jorde
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接