Browser events

Before we dig into how events work in Lightning Components, it is important to briefly touch on JavaScript fundamentals in browser events. In this section, we will explore the bubbling and capturing phases in browser events.

Browser events are signals that are fired on actions (such as page loads, button clicks, key presses, and form submissions). The full list of events supported by browsers can be viewed in the Mozilla developer docs, at https://developer.mozilla.org/en-US/docs/Web/Events.

JavaScript provides various ways to attach event handlers. Some of them are as follows:

• Event handler attributes can be attached with an HTML DOM element. Event handler attributes on DOM elements can consist of HTML events, such as onClick, onLoad, onmouseover, onkeyup, onfocus, and many more. The example code for invoking a JavaScript function on a button click is as follows:

var btn = document.querySelector('button');

btn.onclick = function() {
 console.log('button clicked!!!');
}

• Inline...