Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 + '%';
                You shouldn't be using inline JS anymore: use element.addEventListener('mousemove', (e) => {...}); instead.
– Terry
                Oct 11, 2019 at 13:03
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.
                Be careful with events like mousemove - you need to throttle them since they can fire repeatedly at very high intervals. codeburst.io/…
– max
                Oct 11, 2019 at 13:13
                @amn I put this line on a document.ready function but the picture just doesn't move once it is zoomed it.
– Germán
                Oct 11, 2019 at 13:42
                @max UIEvents (mousemove included) are now to be fired at "optimal frequency rate to balance responsiveness with performance" (understand in painting frames only), i.e they are already debounced.
– Kaiido
                Oct 11, 2019 at 15:01
                @Germán Please explain better -- you did not ask how or whether the picture (figure, I assume?) should zoom, you asked what you should use instead of the deprecated event global. I answered. Do you think it is the fact that you changed from using the deprecated global to event listeners as described in my answer, that introduced the "picture doesn't move once it is zoomed" problem? Or was that problem there from the beginning? Edit your question to better reflect what you want, please.
– Armen Michaeli
                Oct 12, 2019 at 10:34
                Sorry, I was asking for the reason behind, so your answer is totally valid. Sorry for not checking before.
– Germán
                Oct 14, 2019 at 13:56
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.
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.