时间戳

首页 > 解决方案 > “事件”已被弃用，应该改用什么？

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

问题描述

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

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

标签： javascripthtml

解决方案

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

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

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

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

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

figure.addEventListener("mousemove", zoom);

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

推荐阅读