“事件”已被弃用，应该改用什么？

Question

我正在使用使用“事件”的找到的代码。它有效，但我想知道应该使用什么。

我是一名新手程序员，我缺少一些概念。在这种情况下，我使用的是我在网上找到的代码，可以在下一个链接中找到： https ://codepen.io/galulex/pen/eNZRVq

PhpStorm 告诉我 onmousemove=“zoom(event)” 上的“事件”已被弃用。我试过擦除它，但它不起作用。我想知道我应该使用什么来代替事件。

 <figure class="zoom" onmousemove="zoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</figure>

 function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

原文由 Germán 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

全局对象（通常为 window 在 Web 上）的 event 属性最初是由 Microsoft 在 Internet Explorer 中添加的。正如它经常发生的那样，它随后逐渐进入其他流行的 Web 浏览器并停留在那里，成为另一个事实上的“标准”——也就是说，当时没有任何实际权威正式指定。

最终， WHATWG 以向后兼容的名义追溯指定它，将其定义为 “当前”事件，并附上警告说明：

强烈建议 Web 开发人员转而依赖传递给事件侦听器的 Event 对象，因为这将产生更多可移植的代码。此属性在工作人员或工作组中不可用，并且对于在 影子树 中调度的事件不准确。

因此，对于您的用例所属的广泛问题，惯用的解决方案是在元素或其祖先上附加一个事件侦听器，通常使用 addEventListener 函数，并使用事件对象显式传递给监听器。

在您的特定情况下，假设下面的 figure 是指您的 figure 元素，则可以附加事件侦听器（ zoom ）：

 figure.addEventListener("mousemove", zoom);

由于您的 zoom 函数已经假定它传递的单个参数是鼠标移动事件，因此它将继续作为事件侦听器工作而无需更改——它将被调用，并将感兴趣的事件作为唯一参数传递每次鼠标移动。

原文由 Armen Michaeli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

像这样使用它时，我在 VS 代码上遇到了这个错误

document.addEventListener("keydown", function()
{
     console.log(event);
});

使用以下代码解决了警告

document.addEventListener("keydown", function(event)
{
     console.log(event);
});

原因 - 它在事件处理函数中缺少事件参数。它最终使用了脆弱且已弃用的全局 window.event 。

原文由 Ayan 发布，翻译遵循 CC BY-SA 4.0 许可协议