How to use delegated-events - 10 common examples

let allowSubmit = false

function performHealthcheck() {
  const repoName = cast(document.getElementById('showcase_item_name_with_owner'), HTMLInputElement).value
  const submitButton = cast(document.getElementById('submit'), HTMLButtonElement)
  const hiddenForm = cast(document.getElementsByClassName('js-submit-health-check')[0], HTMLFormElement)
  const targetRepoName = cast(document.getElementById('repo_name'), HTMLInputElement)
  document.getElementById("js-health").innerHTML = "Performing health check..."
  targetRepoName.value = repoName
  submitButton.disabled = false
  allowSubmit = true
  submit(hiddenForm)
}

on('submit', '#new_showcase_item', function(e) {
  if (!allowSubmit) { e.preventDefault() }
})

$(document).on('ajaxSuccess', '.js-health', function(event, xhr, settings, data) {
  this.innerHTML = data
})

on('focusout', '#showcase_item_name_with_owner', function() {
  performHealthcheck()
})

on('focusin', '#showcase_item_body', function() {
  if (cast(document.getElementById('showcase_item_name_with_owner'), HTMLInputElement).type === 'hidden') {
    performHealthcheck()
  }
})

evt.split(/\s+/).forEach(evt => {
      if (target.dispatchEvent) {
        target.dispatchEvent(new CustomEvent(evt, {
          bubbles: true,
          cancelable: true,
          detail
        }))
      }
      else {
        delegate.fire(target, evt, detail)
      }
    })
  }

bindSearchInput() {
    on('click', `#${this.page.menuId} button`, () => {
      this.page.target.querySelector('.form-control').focus();
    });

    on('keydown', `#${this.page.menuId}-input`, debounce((ui => function keydown() {
      if (!this.value) {
        ui.resetSearch();
      }
      window.location.hash = this.value ? `filter-files=${this.value}` : '';
    })(this)), DEBOUNCE_TIME);
  }

onLoad() {
      on('click', '#stream ol .op .reply', onClickReply)
      on('click', '#stream ol .op .repost', onClickRepost)
    },

unhover
}: CoreDriver): () => void {
  const toggleOnTouch = handleTouch(lookup, toggle, dismissAll)
  const dismissOnEscape = handleEscape(dismissAll)
  const throttledReposition = throttle(repositionAll)
  const throttledResize = throttle(resizeAll)
  const showOnHover = handleHover(lookup, hover)
  const hideOnHover = handleHover(lookup, unhover)

  document.addEventListener('touchend', toggleOnTouch)
  document.addEventListener('click', toggleOnTouch)
  document.addEventListener('keyup', dismissOnEscape)
  document.addEventListener('gestureend', throttledReposition)
  window.addEventListener('scroll', throttledReposition)
  window.addEventListener('resize', throttledResize)
  on('mouseover', SELECTOR_FOOTNOTE, showOnHover)
  on('mouseout', SELECTOR_FOOTNOTE, hideOnHover)

  return () => {
    document.removeEventListener('touchend', toggleOnTouch)
    document.removeEventListener('click', toggleOnTouch)
    document.removeEventListener('keyup', dismissOnEscape)
    document.removeEventListener('gestureend', throttledReposition)
    window.removeEventListener('scroll', throttledReposition)
    window.removeEventListener('resize', throttledResize)
    off('mouseover', SELECTOR_FOOTNOTE, showOnHover)
    off('mouseout', SELECTOR_FOOTNOTE, hideOnHover)
  }
}

onLoad() {
      on('click', '#stream ol .op .reply', onClickReply)
      on('click', '#stream ol .op .repost', onClickRepost)
    },

import {on} from 'delegated-events'

on('change', '.js-season-select', function(event) {
  const select = event.target
  const season = select.value
  const urlTemplate = select.getAttribute('data-url-template')
  const hash = window.location.hash
  const url = urlTemplate.replace(/{season}/, season) + hash
  select.disabled = true
  window.location.href = url
})

const observer = new SelectorObserver(document, '#friends-list', function() {
  const options = {
    placeholder: 'List other players in your group',
    hiddenInputName: 'friend_names[]',
    preserveCase: true,
    saveOnBlur: true,
    onTagAdd: validateFriends,
    onTagRemove: validateFriends,
    tags: JSON.parse(this.getAttribute('data-selected-friends'))
  }
  const taggle = new Taggle('friends-list', options)
  autocompleteFriends(this, taggle)
})
observer.observe()

on('change', 'input[name="friend_names[]"]', validateFriends)

tabContent.classList.remove('d-none')
  link.classList.add('selected')
  toggleMatchFiltersShare()

  setTimeout(function() {
    if (typeof document.scrollIntoView === 'function') {
      document.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
    } else {
      const header = document.querySelector('.js-top-nav')
      window.scroll({ top: header.clientHeight, left: 0, behavior: 'smooth' })
    }
  }, 100)
}

on('click', '.js-tab', function(event) {
  const link = event.currentTarget
  const selector = link.getAttribute('href')
  if (selector && selector.indexOf('#') !== 0) {
    return
  }

  const tabContent = document.querySelector(selector)
  activateTab(link, tabContent)
})

function loadTabFromUrl() {
  const tabID = (window.location.hash || '').replace(/^#/, '')
  const tabContent = document.getElementById(tabID)
  const allTabLinks = document.querySelectorAll('.js-tab')
  const activeTabLinks = Array.from(allTabLinks).filter(tabLink => {
    const url = new URL(tabLink.href)

}: CoreDriver): () => void {
  const toggleOnTouch = handleTouch(lookup, toggle, dismissAll)
  const dismissOnEscape = handleEscape(dismissAll)
  const throttledReposition = throttle(repositionAll)
  const throttledResize = throttle(resizeAll)
  const showOnHover = handleHover(lookup, hover)
  const hideOnHover = handleHover(lookup, unhover)

  document.addEventListener('touchend', toggleOnTouch)
  document.addEventListener('click', toggleOnTouch)
  document.addEventListener('keyup', dismissOnEscape)
  document.addEventListener('gestureend', throttledReposition)
  window.addEventListener('scroll', throttledReposition)
  window.addEventListener('resize', throttledResize)
  on('mouseover', SELECTOR_FOOTNOTE, showOnHover)
  on('mouseout', SELECTOR_FOOTNOTE, hideOnHover)

  return () => {
    document.removeEventListener('touchend', toggleOnTouch)
    document.removeEventListener('click', toggleOnTouch)
    document.removeEventListener('keyup', dismissOnEscape)
    document.removeEventListener('gestureend', throttledReposition)
    window.removeEventListener('scroll', throttledReposition)
    window.removeEventListener('resize', throttledResize)
    off('mouseover', SELECTOR_FOOTNOTE, showOnHover)
    off('mouseout', SELECTOR_FOOTNOTE, hideOnHover)
  }
}