“事件”已弃用，应该使用什么代替？

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 + '%';
}

Answer 1

我在使用 VS code 时遇到此错误

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

使用以下代码解决了警告

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

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

Answer 2

“全局”event变量最初是由 Microsoft 为 Internet Explorer 实现的，此后在许多流行的用户代理中都得到了支持，而在 WHATWG 以向后兼容的名义追溯这样做之前，没有被任何实际权威正式指定，将其定义为“当前" 事件，并附上警告：

强烈建议 Web 开发人员转而依赖传递给事件侦听器的Event对象，因为这将导致代码更具可移植性。此属性在 worker 或 worklet 中不可用，并且对于在shadow tree 中调度的事件不准确。

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

至于您的具体用例，假设figure下面是指您的井figure元素，则事件侦听器 ( zoom) 可能会因此附加：

figure.addEventListener("mousemove", zoom);

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

Answer 3

你也可以这样做（在反应中），

<input type="file" onChange={event => handleFileChange(event)} />