“event”已被弃用，应该使用什么替代？

Question

“event”已被弃用，应该使用什么替代？

78

我正在使用一段找到的代码，其中使用了“event”。它能够正常工作，但我想知道应该使用什么代替它。

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

PhpStorm 显示我在 onmousemove="zoom(event)" 中的 "event" 已经被弃用。我尝试删除它，但这样并不起作用。我想知道在 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

6

不应再使用内联JS：应改用 element.addEventListener('mousemove', (e) => {...});。 - Terry

1

使用jQuery的替代选项来完成相同的操作。 - PriyankMotivaras

8

jQuery并不总是最好的选择。 - Andreas

11

你也可以使用优秀的 Vanilla JS 框架来完成这个任务。 - Armen Michaeli

2

@amn +1 给原生JS 框架 :) - Aleksej Vasinov

显示剩余4条评论

4个回答

30

我在使用VS code时遇到了这个错误

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

使用以下代码解决了警告

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

原因- 在事件处理函数中缺少事件参数。这最终会使用全局窗口事件 window.event，这是不稳定和过时的。

- Ayan

13

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

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

- Akshay K Nair

3

也适用于Svelte。 - thoredge

4

我曾经遇到过同样的问题。我发现这个代码对我来说像事件一样起作用。

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

- Christopher

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Armen Michaeli · Accepted Answer

全局对象（通常在Web浏览器中为window）的event属性最初是由Microsoft在Internet Explorer中添加的。正如经常发生的那样，它逐渐传播到其他流行的Web浏览器，并成为另一个事实上的“标准”，而当时并未由W3C或类似机构正式指定。

最终，WHATWG以向后兼容性的名义进行了追溯性规定，将其定义为“当前”事件，并附有警示说明：

强烈建议Web开发人员改为依赖于传递给事件监听器的Event对象，因为这将产生更具可移植性的代码。此属性在工作者或worklet中不可用，并且对于在shadow trees中分派的事件是不准确的。

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

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

figure.addEventListener("mousemove", zoom);

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