javascript - получить - отследить событие js




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

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 
}

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

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


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

Вот пояснительная часть кода (из прототипа), которая dataavailable событие события, dataavailable для element :

  var event; // The custom event that will be created

  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
  } else {
    event = document.createEventObject();
    event.eventType = "dataavailable";
  }

  event.eventName = "dataavailable";

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }

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

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

См. Документацию here и here .


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


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

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

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

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

 element.fireEvent("onchange");

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


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

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

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


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

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


То, что вы хотите, это примерно так:

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

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

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

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

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

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


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

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

и обрабатывать его с помощью

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

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


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»







addeventlistener