Event driven Programming

Event

• User initialized
  • Mouse, scrolling, keyboard ...
• Browser initialized
  • Page loaded, DOM Changed ...
• Network
  • Content loaded ...
• Synthetic events
  • Your custom events

Anti-pattern

<a href="page.html" onclick="doSomething()">The link</a>

Add event listeners

"When this happens do that"

let a = document.querySelector('#theatag')

a.addEventListener('click', buttonClicked)

function buttonClicked(event){
    console.log('You clicked the link!')
}

let a = document.querySelector('#theatag')

a.addEventListener('click', function(event){
    console.log('You clicked the link!')
})

let a = document.querySelector('#theatag')

a.addEventListener('click', event => {
    console.log('You clicked the link!')
})

Remove event listeners

using Named function expressions

let a = document.querySelector('#theatag')

a.addEventListener('click', function buttonClicked(event){
    console.log('You can only click me once!')

    a.removeEventListener('click', buttonClicked)
})

Propagation

let a = document.querySelector('#atag')
let p = document.querySelector('#ptag')

a.addEventListener('click', function(event){
    console.log('You clicked the link!')

    event.stopPropagation()
})

p.addEventListener('click', function(event){
    console.log('Damn you a! I will not be called.')
})

p.addEventListener('click', function(event){
    console.log('Hihi! Captured it!')
}, true)

What triggered the event?

Inside an event handler this
will reference the element
which triggered the event.

let a = document.querySelector('#atag')

a.addEventListener('click', function(event){
    a === this             // true
    a === event.target     // true
    this === event.target  // true
})

What triggered the event?

The old fashion way (do not do this... anymore)

let a = document.querySelector('#atag')
let that = this

a.addEventListener('click', function(event){
    // Use that to refer to this outside of the function.
})

What triggered the event?

use bind() or...

let a = document.querySelector('#atag')

a.addEventListener('click', function(event){
    a === this             // false
    a === event.target     // true
    this === event.target  // false
}.bind(this))

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

What triggered the event?

... use Arrow Functions (if possible)

let a = document.querySelector('#atag')

a.addEventListener('click', event => {
    a === this             // false
    a === event.target     // true
    this === event.target  // false
})

What triggered the event?

Closures can cause headache

<div id="links">
    <a href="#">The first link</a>
    <a href="#">The second link</a>
    <a href="#">The third link</a>
    <a href="#">The forth link</a>
</div>

let aTags = document.querySelectorAll('#links a')

for(let i = 0 ; i < aTags.length; i += 1) {

    aTags[i].addEventListener('click', function(event) {
        console.log('Clicked link ', i)  // 4
        console.log(event.target.textContent) // Correct ('The first link'...)

    })
}

https://jsfiddle.net/Leitet/j0umya0d/

What triggered the event?

Functions ftw, or?

<div id="links">
    <a href="#">The first link</a>
    <a href="#">The second link</a>
    <a href="#">The third link</a>
    <a href="#">The forth link</a>
</div>

let aTags = document.querySelectorAll('#links a')

aTags.forEach( (a, i) => {
    a.addEventListener('click', event => {
        console.log(i) // Correct (0 ... 1 ... 2)
        console.log(event.target.textContent) // Correct
    })
})

https://jsfiddle.net/Leitet/j0umya0d/

Event delegation

Add one listener instead of four

<div id="links">
    <a href="#">The first link</a>
    <a href="#">The second link</a>
    <a href="#">The third link</a>
    <a href="#">The forth link</a>
</div>

let div = document.querySelector('#links')

div.addEventListener('click', event => {

        console.log(event.target.textContent) // "The first link"

        event.currentTarget === div //true
})

https://jsfiddle.net/Leitet/j0umya0d/

Stop the default action

let a = document.querySelector('#atag')

a.addEventListener('click', event => {
    console.log('I got this. Don´t activate the link!')
    event.preventDefault()

})

Another alternative is to return false from the listener.

Timers

Timeout:

let timer = setTimeout( () => {
    console.log('At least 3 seconds passed..')
}, 3000)

clearTimeout(timer) // Stops the timer

Interval:

let timer = setInterval( () => {
    console.log('At least 3 seconds passed..')
}, 3000)

clearInterval(timer) // Stops the interval

Putting it all together

bart-board.js

class BartBoard extends window.HTMLElement {
    ...
    connectedCallback () {
        this.addEventListener('mousedown', this._onWrite)
        this.addEventListener('mouseup', this._onStopWriting)
        this.addEventListener('mouseleave', this._onStopWriting)
      }

      disconnectedCallback () {
        this.removeEventListener('mousedown', this._onWrite)
        this.removeEventListener('mouseup', this._onStopWriting)
        this.removeEventListener('mouseleave', this._onStopWriting)
      }

Putting it all together

bart-board.js

class BartBoard extends window.HTMLElement {
    ...

    _onWrite (event) {
        this._intervalID = setInterval(() => {
            if (this._p.offsetHeight >= this.offsetHeight) {

let event = new window.CustomEvent('filled', { detail: {} })


this.dispatchEvent(event)



this._onStopWriting()

return // no use to keep on writing
            }
        ... // Write on board
        }, 200)

app.js

    bb1.addEventListener('filled', () => {
        console.log('Looks like the board is full! Maybee wipe?')
    })