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

user_10607591 0
Viewed 94836

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 + '%';
}
html javascript
4 Answers

The event property of the global object (typically 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.

In your particular 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.

user_2543430

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.

user_100975930

You can do this too (in react),

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

I had this same problem. I found this code worked for me like event used to.

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
user_92265480
Related