JavaScript Manipulating Document Events

Add event listeners

We can add event listeners to any node where we wait for some specific type of event to occur and then call a function. For example we can wait for someone to click a button before we fetch data from an API.

The addEventListener method takes two mandatory parameters: the type of the event we want to listen for and the function that should be called when an even of that type happens.

Event types

There are more than a hundred types of events we can listen for. The ones we are going to use most often are:

• click: Trigger by a pointing device button being pressed and released.
• drag: Triggered by an element or text selection being dragged.
• keyup: Triggered when any key is released.

Code example

Copy
<p>
  Count: <span id="count">0</span>
  <button id="plusOneButton">+1</button>
</p>

<script>
  // state
  let count = 0

  const btn = document.querySelector("#plusOneButton")
  const counter = document.querySelector("#count")
  btn.addEventListener("click", () => {
    count += 1
    counter.innerText = count
  })
</script>

In the example above, we add a click event listener to a button and increase the number (inner text) of another node every time we click the button.

<h1>Wikipedia Searcher</h1>
<form>
  <input name="search" id="search" value="Norway">
  <input type="button" id="searchButton" value="Search">
  <section id="results">
   <ul>
     <li>Norway</li>
     <li>Norway national football team</li>
     <li>Norway Debate</li>
     <li>Norway women's national football team</li>
     <li>Norway–European Union relations</li>
     <li>Norway women's national handball team</li>
     <li>Norway Chess</li>
     <li>Norway–Russia border</li>
     <li>Norway national football team results (2000–19)</li>
     <li>Norway Tamil Film Festival Awards</li>
   </ul>
  </section>
</form>

h1 {
  text-align: center;
}

form {
  padding: 1rem;
  display: grid;
  height: 100%;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: repeat(3fr);
  gap: 0.25rem;
}

label {
  grid-column: span 1;
}

#search {
  grid-row: 2;
  grid-column: span 2;
}

#searchButton {
  grid-row: 2;
  grid-column: span 1;
}

#results {
  grid-row: 3;
  grid-column: span 3;
  border: 1px solid gray;
}

const getWikiUrl = search => `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=${search}`

const txt = document.querySelector("#search")
const btn = document.querySelector("#searchButton")
const results = document.querySelector("#results")

const fetchWikiSearchResults = async search => {
  const res = await fetch(getWikiUrl(search))
  const json = await res.json()
  const suggestions = json[1]
  return suggestions
}

btn.addEventListener("click", async () => {
  const res = await fetchWikiSearchResults(txt.value)
  const newUl = document.createElement("ul")
  const resNodes = res.map(r => {
    const node = document.createElement("li")
    node.append(r)
    return node
  })
  resNodes.forEach(node => newUl.appendChild(node))
  results.prepend(newUl)
})