JavaScriptにおいてWindow.addEventLisnerを切り出す理由

はじめに

JavaScriptにおいてWindow.addEventLisnerに関する記述を最後にする意味が分かりづらかったので、まとめてみました。

解決したい内容

JavaScriptにおいてWindow.addEventLisnerの記載を最後にするかを理解する。

先にwindow.addEventListenerを記述した場合

window.addEventListener('load', function(){

  const pullDownButton = document.getElementById("lists")
  const pullDownParents = document.getElementById("pull-down")
  const pullDownChild = document.querySelectorAll(".pull-down-list")
  const currentList = document.getElementById("current-list")

  pullDownButton.addEventListener('mouseover', function(){
    this.setAttribute("style", "background-color:#FFBEDA;")
  })

  pullDownButton.addEventListener('mouseout', function(){
    this.removeAttribute("style")
  })

  pullDownButton.addEventListener('click', function() {
    if (pullDownParents.getAttribute("style") == "display:block;") {
      pullDownParents.removeAttribute("style")
    } else {
      pullDownParents.setAttribute("style", "display:block;")
    }
  })

  pullDownChild.forEach(function(list) {
    list.addEventListener('click', function() {
      const value = list.innerHTML
    })
  })
})

何が問題なのか

• 今回は「ページが読み込まれたあとに実行する処理」を記載しただけだが、この後にページに関するオブジェクト(window.addEventListener)を追加で記載しなければならない場合、どこがページの読み込み後の処理なのか分からなくなってしまう。
• 最初の関数宣言で処理自体は実行できるが関数に名前を定義できていない。

window.addEventListener('load', pullDown)を切り分けた場合

function pullDown() {

  const pullDownButton = document.getElementById("lists")
  const pullDownParents = document.getElementById("pull-down")
  const pullDownChild = document.querySelectorAll(".pull-down-list")
  const currentList = document.getElementById("current-list")

  pullDownButton.addEventListener('mouseover', function(){
    this.setAttribute("style", "background-color:#FFBEDA;")
  })

  pullDownButton.addEventListener('mouseout', function(){
    this.removeAttribute("style")
  })

  pullDownButton.addEventListener('click', function() {
    if (pullDownParents.getAttribute("style") == "display:block;") {
      pullDownParents.removeAttribute("style")
    } else {
      pullDownParents.setAttribute("style", "display:block;")
    }
  })

  pullDownChild.forEach(function(list) {
    list.addEventListener('click', function() {
      const value = list.innerHTML
      currentList.innerHTML = value
    })
  })
}

window.addEventListener('load', pullDown)

※「ページが読み込まれたあとに実行する処理」の関数名にpullDownとして定義しています。

何が良くなったのか

関数の呼び出しを最後にすることで、どこまでが「ページが読み込まれたあとに実行する処理」なのかが分かりやすくなる。

Rubyでクラスメソッドの処理を呼び出す際も処理内容を上に書いて下に呼び出す構文を記載　　している

ページが読み込まれたあとに実行する処理」の関数名にpullDownとして関数に名前をつけることができる。