[JavaScript]addEventListener('load'）が発火してくれない問題

問題・window.addEventListener('load', change)と記述しているのに
更新ボタンを押さないとイベントが発火してくれない

前提
changeは変数自分で命名する

change.jsの記述内容
function change(){
  item.addEventListener('keyup', function(){
 keyupした時の処理内容
  })
}
window.addEventListener('load', change)

window.addEventListener('load', change)と記述すれば
windowがloadされた時にchangeの内容が処理されるようになる

解決方法

app/javascript/packs/application.jsの内容を書き換える

require("@rails/ujs").start()
require("turbolinks").start()#消す
require("@rails/activestorage").start()
require("channels")
require("../change")

require("turbolinks").start()
この記述を消すと解決される

解説

turbolinksとは？
TurbolinksはRails4.0からデフォルトで導入されたgem
js, cssの読み込みを初回時に行い次回以降の読み込み処理を省略することで高速化する。

Turbolinksの問題点

(document).ready()が発火しない
(window).load()が発火しない←今回の問題
metaタグが更新されない

まとめ

過去保存したjs、cssをいち早く表示するようにrequire("turbolinks").start()が動作している。なのでページを開いた時、新しく追加したchange.jsを反映してくれない。
その後更新ボタンを押すとwindow.addEventListener('load', change)が発火しchange.jsで設定した処理を行ってくれる。

よってページを開いた時から追加したjsの処理を実行して欲しかったらrequire("turbolinks").start()を消す。これで過去保存したcss、jsの情報を表示しなくなり、新しく記述したデーターを読み取り表示できるようにする。