Слушатель событий DOM - не удается найти функцию прослушивателя [duplicate]

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

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

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

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

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

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

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

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

Я нахожу это менее «интенсивно кодовым» и более легким для чтения .

Я искал стреляющий клик, 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);
    }
};

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

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

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

Если вы поддерживаете IE9 +, вы можете использовать следующее.

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

$(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>

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

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

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

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

 element.fireEvent("onchange");

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

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'

Что-то вроде этого:

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

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

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

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

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

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

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

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