/

Useful JavaScript functions & snippets

javascript
On this page
  • Automatically remove an event listener after it has executed
  • The magical handleEvent function
  • Remove query param

Automatically remove an event listener after it has executed

js
el.addEventListener('click', console.log, {
once: true,
})

The magical handleEvent function

js
// Get a reference to the <button>
const btn = document.querySelector('button')
// Define object with `handleEvent` function
const myObject = {
handleEvent: (event) => {
alert(event.type)
},
}
// Listen for 'click' events on the <button> and handle them with `myObject`... WHAT?!?!
btn.addEventListener('click', myObject)

More info

Remove query param

ts
// https://stackoverflow.com/a/58128921/91359
export const removeSearchParam = (paramName: string): void => {
const searchParams = new URLSearchParams(window.location.search)
searchParams.delete(paramName)
if (history.replaceState) {
const searchString =
searchParams.toString().length > 0 ? '?' + searchParams.toString() : ''
const newUrl =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
searchString +
window.location.hash
history.replaceState(null, document.title, newUrl)
}
}
Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.