How to trigger an event in javascript

Question

JavaScript

How to trigger any pure javascript event, including a custom one, if possible?

In jQuery, this is done with the .trigger() method, but I want to understand the basics.
I would be grateful for links on the topic that will help you understand the event mechanism in pure js, so that later you can think about your own implementation of triggers as in jQuery.

Answer 1

In all modern browsers, you can create an event using the constructor

document.documentElement.addEventListener("click", function(e) {
  console.log(e.type, e);
})
document.documentElement.addEventListener("magic", function(e) {
  console.log(e.type, e);
})

var event = new Event("click", {bubbles : true, cancelable : true})
var customEvent = new CustomEvent("magic", {bubbles : true, cancelable : true, detail : "<any string data>"})

document.documentElement.dispatchEvent(event);
document.documentElement.dispatchEvent(customEvent);

Compatibility with older browsers can be ensured using library polyfills

Answer 2

Google says this:
stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
darktalker.com/2010/manually-trigger-dom-event/
I haven't used it myself, I can't vouch for performance.

Answer 3

Here's more:
xpoint.ru/forums/programming/javascript/misc/thread/34487.xhtml
IE: fireEvent(),
others: document.createEvent()
If I understand correctly, custom events are framework-specific.
In addition, you can dig into jQuery itself (the code is not too simple, but commented out):
github.com/jquery/jquery/blob/8d94ed91e47f68f742b6c282c8de40eb5fa8e140/src/event.js
In addition, there is a wonderful book by David Flanagan "Javascript. A detailed guide”, there is a pdf somewhere on the net, there is a whole section devoted to events (50 pages) :-)

Answer 4

The idea is this. There is a way for w3c browsers, there is for IE. In w3c, one function is called to create an event object, it is filled with the necessary data. and a second function that triggers the propagation of that event, i.e. invokes the handlers listening to it. In Ie it seems to be simpler, everything is done by one function.
Tricks: in IE you can't create a custom custom event, only standard ones. Also, firing an event, such as click, only calls the onclick() handlers, but does not click the button, move the cursor into the input field, etc., i.e. does not do the same as a real mouse click.
Look for the words fireEvent, createEvent, dispatchEvent on MDN and MSDN sites for details.

Answer 5

I do like this:
var obj = document.getElementById ("obj_name");
if (obj.addEventListener) {
// Все броузеры кроме ИЕ
obj.addEventListener("mousedown", function_name, false);
} else if (obj.attachEvent) {
// Internet Explorer и Opera
val1.attachEvent ("onmousedown", function_name)
}
function function_name() {
alert("Событие "onmousedown" было применено к элементу с ID = "obj_name" ");
}