addListener 已弃用。还有什么选择？

Question

我有一个简单的 JS 代码，当屏幕宽度为 1200 像素或更小时，将 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);
  });
});