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

IT技术 javascript html
2021-03-05 02:43:36

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

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

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

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

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

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

figure.addEventListener("mousemove", zoom);

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

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

我有同样的问题。我发现这段代码像以前的事件一样对我有用。

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

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

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

使用以下代码解决了警告

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

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

其它你可能感兴趣的问题
上一篇将文本添加到每个数组元素的开头 下一篇JavaScript 加载顺序