changeイベントでのremoveEventListenerが効かない

Question

前提・実現したいこと

javascriptを使用してWebサイトを制作しようとしています。
初心者の質問で恐れ入りますが、お知恵を拝借できれば幸いです。

レスポンシブデザインのテストとして、
『1026px以上』の時にクリックイベント定義、
『1025px以下』の時に同じクリックイベントを削除する
という挙動にしたいのですが、
現在removeEventListenerが効いていない状況です。

そのため、ウィンドウサイズを変更しブレークポイントを跨ぐたび
『1026px以上』の時のclickイベント(コンソールで『ヘッダークリック！
！』と表示)が追加され、一度のクリックで２回、３回と処理が行われてしまっています。

removeEventListenerを有効にするにはどのように記述するべきでしょうか。

該当のソースコード

// machMedia定義
let mql = window.matchMedia('screen and (max-width: 1025px)');

// ブレークポイントで行う処理
let checkBreakPoint = function(mql) {

    let header = document.getElementById('header');
    
    //クリック時に行う処理
    let clickHeader = function(){
        console.log('ヘッダークリック！');
    }

    //1026px以上の時にaddEventListener
    if(!mql.matches) {
        header.addEventListener('click', clickHeader, { passive: false });
    
        //1025px以下の時にremoveEventListener
    } else {
        header.removeEventListener('click', clickHeader,  { passive: false });
    }
}

//実行
mql.addEventListener('change', (e) => {
    e.stopPropagation();
    checkBreakPoint(mql);
});

試したこと

・実行部分のchangeイベントをresizeイベントに変更

　　→setTimeoutでイベント発火のタイミング調整をしても、removeEventListener自体は効かないまま

・1026px以上の時の処理(header.addEvent....)の記述が終わった直後に
setTimeoutで5秒後にremoveEventListenerの記述をした

→5秒後にイベントは削除され、ブレークポイントを跨ぎウィンドウサイズが1025px以下になった時もクリックイベントは削除されたままだった

色々な方のremoveEventListenerに関するご質問を検索していましたが
恥ずかしながら解決策が見つかりませんでした。

大変恐れ入りますが、どうぞよろしくお願いいたします。

Answer 1

removeEventListenerには、addEventListenerで指定したのと同じ関数オブジェクトを渡す必要があります。

このコードではcheckBreakPointが実行されるたびに新しい関数オブジェクトが作られるので、removeEventListenerは正しく動作しません。

let clickHeader = function(){/* 略 */};をcheckBreakPointの外に出せるのであれば、それが手っ取り早いです。

Comments

[退会済みユーザー]

お返事が遅くなり申し訳ありません
ご解説・ご回答ありがとうございます！
おっしゃる通り、引数として渡していた関数オブジェクトを
をcheckBreakPointの外に出して実行したところ、
removeEventListenerがちゃんと効いていました。
大変勉強になりました。ありがとうございます！