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

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

// 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.

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

Если вы не хотите использовать 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 }));

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

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

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

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

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

Если вы поддерживаете 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>

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

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

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

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

Я считаю, что это менее "интенсивное использование кода" и его легче читать.

Изменен ответ @Dorian для работы с 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);

FIDDLE: https://jsfiddle.net/z6zom9d0/1/

СМОТРИ ТАКЖЕ:
https://caniuse.com/#feat=customevent < / а>

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

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

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

Принятый ответ не сработал для меня, ни один из ответов createEvent не сработал.

В конце концов, у меня сработало:

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

Here’s a snippet:

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

Вы можете использовать эту функцию, которую я скомпилировал вместе.

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

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

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

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

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

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

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'

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 
}

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

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

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

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

 element.fireEvent("onchange");

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

Вам нужно что-то вроде этого:

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

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

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