callbacks.md

Callbacks

Are events triggered by users when an "event" occurs, such as a keypress or mouse click.

Events

GUI systems always listen for events from the keyboard, mouse or other inputs

Events are either "triggered" or "fired" when they are invoked.

They can be generated by a user, API or other external resources.

Browser Events

The browser also listens to events that happen in the context of the browser.

Events such as:

• Mouse events (click, mousemove)
• Keyboard events (keyup, keypress)
• Focus events (focus, blur)
• Media events (play, pause, ended)

Window

window.onclick = function clickhandler() {
    console.log("Window Clicked!")
}

Here we are listening for mouse clicks on the entire browser window!

Event Listener

function buttonHandler(event) {
    console.log('clicked!');
};

const button = document.querySelector('button');
button.addEventListener('click', buttonHandler);

Here we are detecting the 'click' event and assigning a callback we declated called "buttonHandler" to trigger once the event listener has detected the callback.

Mouse Event

const mousePosition = document.querySelector(<something>);

mousePosition.addEventListener('mouseover', () => {
    console.log("You moved the mouse!");
});

Here we are attaching the event listener for a mouseover onto an element on the page.

Removing Listeners

const button = document.querySelector('button');

function buttonHandler() {
    console.log("Do Something");
};

button.removeEventListener('click', buttonHandler);

button.addEventListener('click', buttonHandler);

In order to remove the event listener, we must pass the name of the event and the function of the event to remove. element.removeEventListener(, ).

This is because in order to remove the event listener, we must have the full reference. Furthermore, the callback that is referenced when removing the event listener must be a named function, and not an anonymous function.

The Event Object

Events always create a corresponding event object.

The handler will be provided the event as the first parameter.

// The event object is accessed via the first parameter of the handler.

button.addEventListener('click', function(event) {
    console.log(event);
});

When passing a function as a callback, we are not able to pass in the arguments that are described in the that functions parameters (should that function have parameters) unless we use anonymous (or arrow) functions.

The reason for this, is that, if we attempt to pass in arguments through function parenthesis through the callback someFunction(), that function would be invoked instantaneously, and shall not be referenced again.

If that function doesn't require any arguments, we can simply call it as is: someFunction within the callback.

However if the described function indeed has parameters that needs to be accessed by parameters, we should use arrow function syntax: () => { someFunction(args) }, as this will be executed as a callback, once the parent function is satisfied.

Input Events

const $nameInput = document.querySelector("#firstName");

$nameInput.addEventListener('input', (e) => {
    console.log(e.target.value);
});

Here we are gathering the value of the target input selection.

This is useful when we need to perform validation of input fields.

Event Default Behaviour

Some events trigger default behaviours.

When a form's <button> is clicked, the URL of the webpage will redirect due to the forms default event behaviour.

This can be prevented by using: event.preventDefault();

This is to be declared at the top level lexical scope of the function it is being called in.

Event Propagation

Events propagate up from the target, and this is called "Event Bubbling"

<Parent Element>
    <Child Element>
        <Inner Child>

In this example, if there were any event listeners bound to <Inner Child>, once triggered, it would trigger a chain reaction or "event bubble" that propogates and invokes all other event listeners on it's parents.

We can use: event.stopPropagation(); to prevent further propagation of the current event.