addEventListener

přidá listener (naslouchač) nějakému prvku

Příklad:

let mujText = document.querySelector("#text")
let tlacitko = document.querySelector("#tlacitko")

tlacitko.addEventListener("click", zmenBarvuTextu) 

function zmenBarvuTextu() {
    mujText.style.color = "purple"
}

Co se děje:

1. mám text a tlačítko v HTML

let mujText = document.querySelector("#text")
let tlacitko = document.querySelector("#tlacitko")

2. přidám tlačítku listener, který naslouchá kliku myši, pokud se událost provede (uživatel klikne na tlačítko) spustí funkci zmenBarvuTextu

tlacitko.addEventListener("click", zmenBarvuTextu) 

3. vytvořím funkci zmenBarvuTextu, na kterou jsem odkázal při přidání listeneru a která změní barvu textu na fialovou

function zmenBarvuTextu() {
    mujText.style.color = "purple"
}

Výsledek: