CODEWITHSUNDEEP
javascripthtml
Germán
Germán

Reputation: 1301

"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.

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

Upvotes: 95

Views: 196443

Answers (5)

Ubeydullah Keleş
Ubeydullah Keleş

Reputation: 101

I had a similar deprecated symbol warning for event property in my following code block:

onkeypress="return function(e) {
    const value = e.target.value;
    return /[0-9]/.test(e.key) && !(value === '' && e.key === '0') && value.length < 15;
}(event)"

With the help of Claude, I transformed it to this and the warning is gone:

onkeypress="return (function(evt) {
        const value = this.value;
        return /[0-9]/.test(evt.key) && !(value === '' && evt.key === '0') && value.length < 15;
}).call(this, window.event || arguments[0])"

I will reference the explanation as well:

"The reason this fixes the deprecation warning is that we're no longer using the bare event keyword, which was the source of the warning. Instead, we're explicitly getting the event object through either window.event or arguments[0], which is a more modern and supported approach."

I don't have enough experience to argue for or against this argument. So, do your own investigation and move accordingly. Hope this helps.

Upvotes: 0

Armen Michaeli
Armen Michaeli

Reputation: 9140

The event property of the global object (typically window in the Web browser) was originally added by Microsoft in Internet Explorer. As it often happens, it then gradually found its way into other popular Web browsers and became another de-facto "standard" without being formally specified by W3C or similar authority at the time.

Eventually, WHATWG specified it retroactively for the sake 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.

Upvotes: 57

Akshay K Nair
Akshay K Nair

Reputation: 1476

You can do this too (in react),

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

Upvotes: 17

Ayan
Ayan

Reputation: 551

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.

Upvotes: 38

Christopher
Christopher

Reputation: 202

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

Upvotes: 5

Related Questions