Questions tagged [dom-events]

JavaScript events register various event handlers/listeners on the element nodes inside an HTML document DOM tree.

There are many different ways of attaching event listeners:

• element.addEventListener(type, listener[, useCapture]) — registers type event on element, using listener as handler. You can register multiple event listeners using this method and remove them with element.removeEventListener(). The optional useCapture parameter allows you to decide whether you want to handle it in the capture phase or in the bubbling phase. IE <= 8 doesn't support it, but has similar method: element.attachEvent(); however it doesn't have useCapture argument.
• element.onevent = handler (where event should be replaced appropriate event name, e.g. click or load) — this was a way to register events in DOM 0. It has many drawbacks, for example you can use only one handler and it doesn't have useCapture parameter.
• onevent HTML attributes (e.g. <button onclick="console.log('clicked');">Button</button>) — similar as element.onevent, but generally considered a bad practice because of mixing document structure (HTML) and logic (JavaScript).

References:

• DOM events (Wikipedia)

Links:

• JavaScript event compatibility tables (QuirksMode)
• List of DOM events (MDN)
• MDN Creating and Dispatching Events