addListener 已弃用。有什么选择？

Question

当屏幕宽度为 1200 像素或更小时，我有一个简单的 JS 代码可以将 HTML 元素从一个 div 移动到另一个。它运行良好，但 addListener 事件处理程序在 VSC 中被划掉，我收到警告说它已被弃用。我应该如何更改代码以避免该警告？

$(document).ready(function(){
  var x = window.matchMedia("(max-width: 1200px)");
  
  function move(x) {
      if (x.matches) {
        $('.menu').insertBefore($('.popup ul'));
      }

      else {
        $('.menu').insertAfter($('.logo'));
      }
  }

  move(x);
  x.addListener(move);
});

Answer 1

使用change 事件转换为addEventListener。您需要从 event 参数中提取目标以将其传递给 move()。

$(document).ready(function() {
  var x = window.matchMedia("(max-width: 1200px)");

  function move(x) {
    if (x.matches) {
      $('.menu').insertBefore($('.popup ul'));
    } else {
      $('.menu').insertAfter($('.logo'));
    }
  }

  move(x);
  x.addEventListener('change', function(event) {
    move(event.target);
  });
});