“事件"已弃用，应该使用什么代替? [英] "event" is deprecated, what should be used instead?

问题描述

我正在使用找到的代码，其中使用了事件".它可以工作，但是我想知道应该用什么代替.

I'm using a found code where "event" is used. It works, but I would like to know what should be used instead.

我是一名新手程序员，但我缺少一些概念.在这种情况下，我使用的是我在网上找到的代码，该代码可以在下一个链接中找到: https://codepen.io/galulex/pen/eNZRVq

I'm a novice programmer and there are a concepts that I'm missing. in this case, I'm using a code I found in the web, that can be found in the next link: https://codepen.io/galulex/pen/eNZRVq

PhpStorm向我显示不赞成onmousemove ="zoom(event)"上的事件".我曾尝试擦除它，但这种方法无法正常工作.我想知道我该用什么代替事件.

PhpStorm shows me that "event" on onmousemove="zoom(event)" is deprecated. I have tried erasing it but it does not work that way. I would like to know what should I use instead of 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 + '%';
}

推荐答案

是的，全局" event 变量从未得到广泛的标准化，但是由Microsoft发明，然后被许多流行的用户代理所采用. WHATWG将其描述为当前正在处理的事件，并附带注释:

Yes, the "global" event variable was never standardised broadly but was invented by Microsoft and then carried on by many popular user agents ever since. It is described by WHATWG to be to the event currently being processed, with an attached note:

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

Web developers are strongly encouraged to instead rely on the Event object passed to event listeners, as that will result in more portable code. This attribute is not available in workers or worklets, and is inaccurate for events dispatched in shadow trees.

您的用例所属的大类问题的惯用解决方案是使用

The idiomatic solution to the broad class of problems your use case belongs to is to attach an event listener with the use of the addEventListener function (on the element or its ancestor, depending). The event listener will receive the correct event as the sole argument.

您需要一种方法来识别您的 figure 元素，因为它没有 id .例如，我将使用 document.querySelector("figure"):

You need to have a way to identify your figure element, since it does not have an id. For example, I will use document.querySelector("figure"):

document.querySelector("figure").addEventListener("mousemove", zoom);

基本上就是这些，因为您的 zoom 函数已经定义为可以使用单个参数作为实际的鼠标移动事件，因此将事件侦听器传递给addEventListener .

That's all, basically -- since your zoom function is already defined to work with a single argument being the actual mouse move event, it will fit fine as the event listener being passed to addEventListener.

这篇关于“事件"已弃用，应该使用什么代替?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！