"event" is deprecated, what should be used instead?

Question

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

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 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 + '%';
}

Answer 1

The event property of the global object (window on the Web) was initially added by Microsoft in Internet Explorer. As it often happens, it then gradually found its way into other popular Web browsers and stayed there becoming another de-facto "standard" -- that is, without being formally specified by any actual authority at the time.

Eventually, WHATWG specified it retroactively in the name of backwards compatibility, defining it as the "current" event, with an attached cautionary note:

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.

So, the idiomatic solution to the broad class of problems your use case belongs to is to attach an event listener on the element or its ancestor, typically with the addEventListener function, and be using the event object that is explicitly passed to the listener.

As for your concrete use case, assuming figure below refers to your well, figure element, the event listener (zoom) may be attached thus::

figure.addEventListener("mousemove", zoom); 

Since your zoom function already assumes the single argument it is passed is the mouse move event, it will continue working as an event listener without needing changes -- it will be called with the event of interest passed as sole argument every time the mouse moves.

Answer 2

I was getting this error on VS code while using it like this

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

The warning got solved using the below code

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

Reason- It's missing the event parameter in the event handler function. It ends up using the global window.event which is fragile and is deprecated.

Answer 3

You can do this too (in react),

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