Browser Events Flashcards
Events
Mouse Events
Keyboard Events
Form Element Events
Document Events
CSS Events
Evnet Handler
Function that runs on occurence of an event
onClick() vs onClick
// right
button.onclick = sayThanks;
// wrong
button.onclick = sayThanks();
//right
<input></input>
because
browser converts to this button.onclick = function() {
sayThanks(); // <– the attribute content goes here
};
inside sayThanks() - this refers to the element on which onClick was called
Event Listener
The fundamental problem of event handlers is we can’t assign multiple handlers to one event.
element.addEventListener(event, handler, [options])
event - Event name, e.g. “click”.
handler - The handler function
options -
An additional optional object with properties:
once: if true, then the listener is automatically removed after it triggers.
capture: the phase where to handle the event, to be covered later in the chapter Bubbling and capturing. For historical reasons, options can also be false/true, that’s the same as {capture: false/true}.
passive: if true, then the handler will not call preventDefault(), we’ll explain that later in Browser default actions.
EventListner example
<input></input>
function handler1() {
alert('Thanks!');
};
elem.addEventListener(“click”, handler1); // Thanks!
</script>
Event Object
When an event happens, the browser creates an event object, puts details into it and passes it as an argument to the handler.
<input></input>
<script>
elem.onclick = function(event) {
// show event type, element and coordinates of the click
alert(event.type + " at " + event.currentTarget);
alert("Coordinates: " + event.clientX + ":" + event.clientY);
};
</script>
Object handler : handleEvent
We can assign an object as an event handler using addEventListener. When an event occurs, its handleEvent method is called.
let obj = {
handleEvent(event) {
alert(event.type + “ at “ + event.currentTarget);
}
};
elem.addEventListener(‘click’, obj);
Getting method to call from input event
<script>
class Menu {
handleEvent(event) {
// mousedown -> onMousedown
let method = 'on' + event.type[0].toUpperCase() + event.type.slice(1);
this[method](event);
}
onMousedown() {
elem.innerHTML = "Mouse button pressed";
}
onMouseup() {
elem.innerHTML += "...and released.";
}
}
let menu = new Menu();
elem.addEventListener('mousedown', menu);
elem.addEventListener('mouseup', menu);
</script>Bubbling
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
<style>
body * {
margin: 10px;
border: 1px solid blue;
}</style><form>FORM
<div>DIV
<p>P</p>
</div>
</form>
So if we click on <p>, then we’ll see 3 alerts: p → div → form.
event.target and event.currentTarget
event.target – is the “target” element that initiated the event, it doesn’t change through the bubbling process.
event.currentTarget is the current element which is handling the event. It is same as this
Stop Bubbling
any handler may decide that the event has been fully processed and stop the bubbling.
The method for it is event.stopPropagation().
event.stopImmediatePropagation()
If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
In other words, event.stopPropagation() stops the move upwards, but on the current element all other handlers will run.
To stop the bubbling and prevent handlers on the current element from running, there’s a method event.stopImmediatePropagation(). After it no other handlers execute.
Capturing
The standard DOM Events describes 3 phases of event propagation:
Capturing phase – the event goes down to the element.
Target phase – the event reached the target element.
Bubbling phase – the event bubbles up from the element.
Capturing is not very useful
Default Browser Action
Many events automatically lead to certain actions performed by the browser.
For instance:
A click on a link – initiates navigation to its URL.
A click on a form submit button – initiates its submission to the server.
Preventing Default Browser Action
There are two ways to tell the browser we don’t want it to act:
The main way is to use the event object. There’s a method event.preventDefault().
If the handler is assigned using on<event> (not by addEventListener), then returning false also works the same.
<a>Click here</a>
or
<a>here</a></event>
Custom Events
We can create Event objects like this:
let event = new Event(type[, options]);
type – event type, a string like “click” or our own like “my-event”.
options – the object with two optional properties:
bubbles: true/false – if true, then the event bubbles.
cancelable: true/false – if true, then the “default action” may be prevented. Later we’ll see what it means for custom events.
hello custom event
<h1>Hello from the script!</h1>
<script>
// catch on document...
document.addEventListener("hello", function(event) { // (1)
alert("Hello from " + event.target.tagName); // Hello from H1
});
// ...dispatch on elem!
let event = new Event("hello", {bubbles: true}); // (2)
elem.dispatchEvent(event);
// the handler on document will activate and display the message.
</script>
Triggering hello event
Right now, the “hello” event is only triggered programmatically using dispatchEvent(). The user has no way to trigger it manually. To allow a user to trigger the event, you can listen for a click (or another user action) and dispatch the event when that happens.
<h1>Click me to say hello!</h1>
<script>
document.addEventListener("hello", function(event) {
alert("Hello from " + event.target.tagName);
});
document.getElementById("elem").addEventListener("click", function() {
let event = new Event("hello", { bubbles: true });
this.dispatchEvent(event);
});
</script>
UI Events, Keyboard Events
We should use them instead of new Event if we want to create such events. For instance, new MouseEvent(“click”).
CustomEvent class
For our own, completely new events types like “hello” we should use new CustomEvent. Technically CustomEvent is the same as Event, with one exception.
In the second argument (object) we can add an additional property detail for any custom information that we want to pass with the event.
elem.dispatchEvent(new CustomEvent(“hello”, {
detail: { name: “John” }
}));
Event Processing
Usually events are processed in a queue. That is: if the browser is processing onclick and a new event occurs, e.g. mouse moved, then its handling is queued up, corresponding mousemove handlers will be called after onclick processing is finished.
The notable exception is when one event is initiated from within another one, e.g. using dispatchEvent. Such events are processed immediately: the new event handlers are called, and then the current event handling is resumed.
