Как вызвать событие в JavaScript?

Question

Я прикрепил событие к текстовому полю, используя addEventListener. Работает нормально. Моя проблема возникла, когда я хотел программно вызвать событие из другой функции.

Как я могу это сделать?

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

Надеюсь, это поможет!

Answer 2

Вы можете использовать приведенный ниже код для запуска события, используя метод 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>

Answer 3

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 
}

Answer 4

То, что вы хотите, выглядит примерно так:

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

Используя jQuery, это будет примерно так:

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

Answer 5

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'

Answer 6

Самый эффективный способ - вызывать ту же функцию, которая была зарегистрирована в addEventListener напрямую.

Вы также можете вызвать поддельное событие с помощью CustomEvent и co.

Наконец, некоторые элементы, такие как <input type="file">, поддерживают метод .click().

Answer 7

Использовать вызов события jquery. Напишите ниже строку, где вы хотите вызвать onChange любого элемента.

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

element_id - это идентификатор элемента, onChange которого вы хотите активировать.

Избегайте использования

 element.fireEvent("onchange");

Потому что у него очень мало поддержки. Обратитесь к этому документу за поддержкой .