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

【问题标题】："event" is deprecated, what should be used instead?“事件”已弃用，应该改用什么？
【发布时间】：2019-10-11 13:01:26
【问题描述】：

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

我是一名新手程序员，我缺少一些概念。在这种情况下，我使用的是我在网上找到的代码，可以在下一个链接中找到： 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 + '%';
}

【问题讨论】：

你不应该再使用内联JS了：改用element.addEventListener('mousemove', (e) => {...});。
使用替代 jquery 选项做同样的事情
@PriyankMotivaras jQuery 并不总是答案。
@PriyankMotivaras 您也可以使用出色的 Vanilla JS 框架来做到这一点。
@Andreas 但是 jQuery 可以为新开发者解决一些小问题，它可以节省时间

标签： javascript html

【解决方案1】：

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

最终，WHATWG 以向后兼容的名义追溯指定它，将其定义为 the "current" event，并附上警告说明：

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

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

至于您的具体用例，假设下面的figure 指的是您的井，figure 元素，则可以附加事件侦听器（zoom）：：

figure.addEventListener("mousemove", zoom);

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

【讨论】：

小心mousemove 之类的事件 - 您需要限制它们，因为它们可以以非常高的间隔重复触发。 codeburst.io/…
@amn 我将这一行放在 document.ready 函数上，但图片一旦缩放就不会移动。
@max UIEvents（包括mousemove）现在以“最佳频率速率以平衡响应性和性能”（仅在绘画框架中理解）被触发，即它们已经去抖动。
@Germán 请更好地解释一下——您没有问图片（我假设是数字）如何或是否应该缩放，您问的是应该使用什么来代替已弃用的 event 全局。我回答了。您是否认为是因为您从使用已弃用的全局更改为我的回答中描述的事件侦听器，从而引入了“图片一旦缩放就不会移动”的问题？还是从一开始就存在这个问题？请编辑您的问题以更好地反映您的需求。
对不起，我问的是背后的原因，所以你的回答是完全有效的。很抱歉之前没有检查。

【解决方案2】：

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

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

使用以下代码解决了警告

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

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

【讨论】：

【解决方案3】：

我遇到了同样的问题。我发现这个code 对我有用，就像以前的活动一样。

function hide(e){
  e.currentTarget.style.visibility = 'hidden';
  console.log(e.currentTarget);
  // When this function is used as an event handler: this === e.currentTarget
}

var ps = document.getElementsByTagName('p');

for(var i = 0; i < ps.length; i++){    
  // Console: print the clicked <p> element 
  ps[i].addEventListener('click', hide, false);
}
// Console: print <body>
document.body.addEventListener('click', hide, false);

// Click around and make paragraphs disappear

【讨论】：

【解决方案4】：

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

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

【讨论】：