I want to detect dark mode change in JavaScript. Things work fine when I call window.matchMedia("(prefers-color-scheme: dark)").addEventListener directly.

However, when I assign window.matchMedia("(prefers-color-scheme: dark)").addEventListener to a variable:

var func = window.matchMedia("(prefers-color-scheme: dark)").addEventListener;
func("change", () => console.log("test"));

The EventListener function does not run.

Code to reproduce:

function test_1() {
  var MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");

  MediaQueryList.addEventListener("change", () => {
    console.log("Call MediaQueryList.addEventListener");
  });
}

function test_2() {
  var MediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
  var func = MediaQueryList.addEventListener;

  func("change", () => {
    console.log("Call MediaQueryList.addEventListener use variable");
  });
}

test_1();
test_2();

CodePen: https://codepen.io/sortujayde/pen/jOYLEaK?editors=1111

Chrome version: 99.0.4844.84