Question

26

event is deprecated, what should be used instead?

rated 0 times [ 28] [ 2] / answers: 1 / hits: 127721 / 5 Years ago, fri, october 11, 2019, 12:00:00

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

virginia

Add To Favorites

Follow

Total Points: 632

Total Questions: 95

Total Answers: 95

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

virginia questions

1 Change border color of MUI disabled outline input

Thu, Mar 24, 22, 00:00, 2 Years ago

1 How to download .zip file that i recieve from a HTTP response (axios PUT request)

Thu, Feb 3, 22, 00:00, 2 Years ago

1 Cancel async Axios GET request - React hooks

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Adding Animation while switching to dark mode HTML

Thu, Apr 9, 20, 00:00, 4 Years ago

1 How to add dynamic content to React Material UI expansion panels whilst keeping only one active tab at at time functionality

Wed, Feb 5, 20, 00:00, 4 Years ago

View All

answered 5 Years ago kamryn · Accepted Answer

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