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


523

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

Как мне это сделать?


11
У Mozilla есть очень хорошая статья, объясняющая создание и запуск событий в Javascript . Надеюсь, поможет!
Рикки Стам

1
Пожалуйста, измените принятый ответ на это , это более актуально.
Михал Перлаковский

1
@RickyStam Похоже, что статья MDN перенесена сюда
Styfle

Ответы:


454

Вы можете использовать fireEvent в IE 8 или ниже и W3C dispatchEvent в большинстве других браузеров. Чтобы создать событие , которое вы хотите огнь, вы можете использовать либо createEventили в createEventObjectзависимости от браузера.

Вот не требующий пояснений фрагмент кода (из прототипа), который запускает событие dataavailableв element:

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

6
Не забывайте, что только в версии IE «включено» впереди (я сначала это пропустил)
hugomg

45
Что eventNameздесь содержится в переменной ?
NeDark

1
Да, данные должны быть в eventName и также должны быть определены memo (определение для {} - это нормально).
Чарльз

4
Internet Explorer 9+ обрабатывает createEvent и dispatchEvent, поэтому в этих операторах if нет необходимости.
Блейк,

5
Этот пример даже не работает, смотрите мой ответ: stackoverflow.com/a/20548330/407213
Дориан

334

Рабочий пример:

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

Для старых браузеров polyfill и более сложных примеров смотрите MDN docs .

Смотрите таблицы поддержки для EventTarget.dispatchEventи CustomEvent.


11
Этот ответ более актуален сейчас. Одна вещь, которую нужно добавить: если должно быть событие с типизированной информацией (например, TransitionEvent , ClipboardEvent и т. Д.), Может быть вызван соответствующий конструктор.
Кирил

6
@AngelPolitis: Потому что он был написан после того, как предыдущий уже был принят, и человек, который написал вопрос (@KoolKabin), вероятно, не перечитал ответы
Дориан

4
И потому что об этом спросили в 2010 году
DarkNeuron

Не будет работать с любой версией IE ( caniuse.com/#feat=customevent ). Смотрите мой ответ для исправления.
Ярин

Примечание для будущих читателей, detailявляется свойством Event, поэтому присвойте им любые данные, к которым вы хотите получить доступ на другом конце, и получите к ним доступ event.detail. +1
дака

71

Если вы не хотите использовать jQuery и не особенно заботитесь о обратной совместимости, просто используйте:

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

Смотрите документацию здесь и здесь .

РЕДАКТИРОВАТЬ: В зависимости от вашей настройки вы можете добавить bubbles: true:

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

4
Это должен быть принятый ответ, поскольку он не использует устаревшие методы, такие как initEvent ()
user2912903

2
Хорошее решение, но знайте, что это не будет работать на IE11. Затем вы должны использовать CustomEventи соответствующий polyfill.
Фабиан фон Эллертс

2
Лучше, чем выбранный ответ
WitnessTruth

42

если вы используете JQuery, вы можете просто сделать

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

и справиться с этим

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

где «[arg0, arg1, ..., argN]» означает, что эти аргументы являются необязательными.


4
Правильный синтаксис: $ ('# yourElement'). Trigger ('customEventName', [arg0, arg1, ..., argN]); Вы забыли [] по второму параметру
Гарри

25

Если вы поддерживаете IE9 +, вы можете использовать следующее. Та же концепция заложена в JQuery «Вам может не понадобиться» .

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}

function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

// Add an event listener.
addEventListener(document, 'customChangeEvent', function(e) {
  document.body.innerHTML = e.detail;
});

// Trigger the event.
triggerEvent(document, 'customChangeEvent', {
  detail: 'Display on trigger...'
});


Если вы уже используете jQuery, вот версия jQuery приведенного выше кода.

$(function() {
  // Add an event listener.
  $(document).on('customChangeEvent', function(e, opts) {
    $('body').html(opts.detail);
  });

  // Trigger the event.
  $(document).trigger('customChangeEvent', {
    detail: 'Display on trigger...'
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Это не будет работать для любой версии IE, поскольку window.CustomEventсуществует, но его нельзя вызвать как конструктор: caniuse.com/#search=CustomEvent ;)
SidOfc

13

Я искал событие щелчка, запуска мыши и наведения мыши при наведении курсора мыши с помощью 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);
    }
};

8

Просто, чтобы предложить альтернативу, которая не требует необходимости вручную вызывать событие слушателя:

Что бы ни делал ваш прослушиватель событий, переместите его в функцию и вызовите эту функцию из прослушивателя событий.

Затем вы можете также вызвать эту функцию где угодно, чтобы выполнить то же самое, что и событие, которое происходит при его запуске.

Я нахожу это менее "интенсивным по коду" и легче читать.


1
Что если вы хотите сделать несколько разных вещей для одного и того же события (или, ну, в общем, функцию обратного вызова) в зависимости от контекста? :) Это хорошая альтернатива, но это больше похоже на комментарий, чем на ответ, так как ОП хочет знать, как программно вызвать событие, а не использовать обратный вызов :)
SidOfc

Вы совершенно правы, что это должен был быть комментарий, а не ответ. Почему? Потому что ... ну, это не отвечает на вопрос, который на самом деле был задан. Хороший звонок. Что касается вашего собственного вопроса, я бы сказал, что это отличная возможность для конструкторов в JavaScript! ;-) Но без них, я бы сказал, отправьте аргумент с вызовом вашей функции, и пусть это будет использовано для определения того, что должна делать функция.
Кирби Уоллес

5

Я просто использовал следующее (кажется, гораздо проще):

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

В этом случае событие инициируется только в том случае, если значение действительно изменилось, как если бы вы вызывали его из-за потери локуса обычного фокуса, выполняемого пользователем.


1
Это не учитывает, что это за событие. Размытие и фокусировка могут вызвать событие, но не так хорошо. Это приглашает к ошибке.
Мардок

1
Это также относится к element.click().
AxeEffect

Это исправило странную проблему для моего приложения Angular / Cordova в Android, когда текстовое поле отказывалось очищаться. Тогда спасибо.
DarkNeuron

5

Модифицированный ответ @ Дориана для работы с 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


4

Принятый ответ не работал для меня, ни один из 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', function(event) {
    clickBtn.dispatchEvent(
        new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window,
    }));
});

clickBtn.addEventListener('click', function(event) {
    console.warn(`I was accessed via the other button! A ${event.type} occurred!`);
});
<button class="clickme">Click me</button>

<button class="viame">Via me</button>

Из чтения: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent


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
Это не рекомендуется. Полезно только для полифилов. developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…
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

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


0

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

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

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


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


-2

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

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

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

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

 element.fireEvent("onchange");

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


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

-9

То, что вы хотите, это что-то вроде этого:

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

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

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

триггерный метод не является неправильным, но это метод jquery
Камуран Сонечек

2
1. document.getElementByClassNameне существует 2. document.getElementsByClassNameсуществует, но возвращает список. 3. это работает только для нескольких избранных событий. 4. В последнем примере запускается событие jQuery, в котором не существует основного нативного события.
Гленн Джорд
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.