JavaScript

DOM Events - part 1

Events are things that happens to HTML elements. They can happend with user interactions as mouse events, resizing a window or click evenst.
To use an event you must use an eventListener.

element.addEventListener(event, functionName);

element.addEventListener(event, function(){ ... });

The eventListener has 3 parameters. the most important ones is the first 2. The first one is the type of event, like "click" or "mousedown", the second paramter is the function we want to call when the event occures.

Why work wit it?

We should work with eventListener, because:

  • It allows adding more than one handler for an event.
  • It works on any event target, not just HTML or SVG elements
  • We can separate HTML and JavaScript from each other

Function parameter

This is the function parameter. There are two ways to make DOM events.

<!--A button in HTMl-->
<button id="buttonYes"> I'm a button </button>
//anonymous function 
let element = document.getElementById("buttonYes");

element.addEventListener("click", function(){
alert("Hello World!");
});
//simple eventListener 
let element = document.getElementById("buttonYes");

function myFunction() {
alert ("Hello World!");
};
element.addEventListener("click", myFunction);

See the Pen eventListener - anonymous by Dominoeffekten (@dominoeffekten) on CodePen.

DO NOT DO THIS

We have talked about how to make an event handler and how to remove the event handler. But there are also ways you should NOT make event handlers.
Do NOT use inline event handlers

<button onclick="hello()">Press me</button>
function hello() { 
alert("hi");
};

This is an old way to make an event handler and are considered bad practice. It is not a good idea to mix up HTML and JavaScript. Keep them seperate.

Remove the event handler

This method removes the event handler that have been attached with the addEventListener().

element.removeEventListener("mousemove", myFunction);

How to use it

//simple eventListener 
let element = document.getElementById("click");
function myFunction() {
alert ("Hello World!");
element.removeEventListener("click", myFunction);
};
element.addEventListener("click", myFunction);

Event parameter

We will talk about the event parameter. There are mouseevents and keyboard events.

Mouse handlers

Click

When the element receives a click event when the mouse is both pressed and released while the pointer is located inside the element.

document.addEventListener("click", foobarFunction); 
document.getElementById("foobar").addEventListener("click", function(){ });

Double click

When the element receives a click event when the mouse is both pressed and released while the pointer is located inside the element.

document.getElementById("foo").addEventListener("dblclick", barFunction);

Assignment

Make a HTML button and add a eventListener. Every time the button is pushed the background color for the site must change to a random color

//code for random color
let rndCol = Math.floor(Math.random()*16777215).toString(16);

Mousedown

The mousedown event starts when a pointing device button is pressed while the pointer is inside the element.

document.getElementById("foo").addEventListener("mousedown", barFunction);

Mouseup

The mouseup event starts when a pointing device button is released while the pointer is inside the element.

document.getElementById("foo").addEventListener("mouseup", barFunction);

Example on mouse events

See the Pen Change image with JS hover by Dominoeffekten (@dominoeffekten) on CodePen.

Assignment

Make a section with a heading and add a eventListener. Everytime the mouse is over the section must the heading change. When the mouse is away from section it must change back

//TIP
//call the heading element and use innerHTML to change it
element.innerHTML = "I'm changed";

Touch handlers

To provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.

Touchstart

Touchstart is a touch event that started when the surface is touched

document.getElementById("foo").addEventListener("touchstart", barFunction);

Touchend

Touchend is a touch event that starts when the surface is no longer touched

document.getElementById("foo").addEventListener("touchend", barFunction);

Touchmove

Touchmove begins when the finger (or whatever is touching the device) moves over the surface

document.getElementById("foo").addEventListener("touchmove", myBGfunction);

Dom Events - part 2

Scroll handlers

The scroll event fires when an element has been scrolled.

Scroll

The scroll event occurs when an element's scrollbar is being scrolled.

document.addEventListener("scroll", foobarFunction);

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'

Dom events - part 3

Keyhandlers handlers

Events

document.addEventListener("keydown", function(event){
console.log(`${event.code} ${event.repeat} ${event.key}`);
});

Keyup

The keyup event is fired when a key is released.

document.addEventListener("keyup", function(e){
console.log(e.key);
});

Keydown

The keydown event is fired when a key is pressed.

document.addEventListener("keydown", function(e){
console.log(e.key);
});

Assignment

Find your gaming projekt you ahve made with Laila.

  • Make an eventListener that listens after the keypress
  • Make a switch that looks for the letters the user has pressed
  • Make a variable and save the letters the user has pressed
  • Print out on the site, the variable

Drag & Drop

The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button

Drag

The drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.

dragend

The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

dragover

The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

dragstart

The dragstart event is fired when the user starts dragging an element or text selection.

drop

The drop event is fired when an element or text selection is dropped on a valid drop target.