what is the difference between js events and DOM events?

Question

I am trying to understand events(such as: click, keyPress...) in js. But when I studied online, I saw it mentioned a lot on 'DOM events'. So my question is js events the same as DOM events? If not, what is the difference?

Answer 1

DOM events fires when the DOM changes or interacts with user, and they are Javascript events. Please have a read all of them: http://www.w3schools.com/jsref/dom_obj_event.asp

Apart from DOM events, you can define your own event objects in Javascript and use the 'dispatchEvent' method to fire that event. For example:

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

In short, you can think of DOM events are native Javascript events that fires from DOM elements. While a Javascript event can be a DOM event or Custom event

Answer 2

A DOM event is any event that elements or objects in the DOM listen on. For example, a button click, a text input keypress, a mouseover. Generally DOM events are triggered by some sort of user interaction (mouse events, keyboard events, form submissions etc). DOM events can be triggered programatically though.

There are other events that wouldn't be regarded as DOM events, for example:

• AJAX response ( onreadystatechange )
• WebSocket message received ( MessageEvent )
• LocalStorage data changed ( storage )

Answer 3

Dom Events: This event perform on the DOM component to perform certain action over it like (events/properties,etc)

Js Events: This events will perform action over the content of the DOM object like (validation(condition),expression,methods over the Dom object,etc)

Answer 4

An event is a system when certain actions performed are recorded and can be acted upon. Such as clicking on a button, hovering over some box, selecting some text, or even receiving a new message on a certain channel.

In js, DOM events are standard events that correspond to actions performed directly on an element in the DOM such as when the user clicks on something, the click event(directly corresponding to the user clicking the button) is triggered and any event handlers attached to the element will be called. Here's a list of events: https://en.wikipedia.org/wiki/DOM_events These are recognized and supported by the browsers and are natively triggered.

Many js libraries make their own system of events over these DOM events. They wrap around the element that is listened to and when an event is triggered, they propogate the event to the handling function

They can also support custom events on DOM or any other object by having the user call a specific function such as

 obj.on("receive", function(){alert("Hello")})


 //Later
 obj.trigger("receive")

So the anonymous function(display an alert) will be called whenever you trigger the receive event. What happens here is that the on function will keep a list of handlers attached to the object and the trigger function will call each one and call them using any required data