'onmousemove' in HTMLElement.prototype in true, and every event should be added via addEventListener to avoid conflicts with other possible events.
b.onmouseleave should be b.addEventListener('mouseleave', ...) and the other too, or you can use handleEvent with an object right away.
As summary, this is how I would've written that:
constwinBtn={handleEvent(e){this[`on${e.type}`](e);},onmouseleave({currentTarget}){Object.assign(currentTarget.style,{background:"black",borderImage:null});currentTarget.border="1px solid transparent";},onmouseenter(){clearNearBy();},onmousemove({currentTarget,clientX,clientY}){currentTarget.border="1px solid transparent";const{left,top}=currentTarget.getBoundingClientRect();constx=clientX-left;//x position within the element.consty=clientY-top;//y position within the element.Object.assign(currentTarget.style,{background:`radial-gradient(circle at ${x}px ${y}px , rgba(255,255,255,0.25),rgba(255,255,255,0) )`,borderImage:`radial-gradient(20% 65% at ${x}px ${y}px ,rgba(255,255,255,0.7),rgba(255,255,255,0.7),rgba(255,255,255,0.1) ) 9 / 2px / 0px stretch `});}};document.querySelectorAll(".win-btn").forEach((b)=>{for(consttypeof['mouseleave','mouseenter','mousemove'])b.addEventListener(type,winBtn);});
if you look closer, you also have one object as listener, with 4 methods, instead of N x 3 functions per each .win-btn on the page ... it's both a RAM and a CPU win ;-)
Do you always prefer this syntax over normal syntax? Since you have a ton of experience in JS, I would like to know what more improvisations can be made 😬. Please give your feedback on part 3 also
'onmousemove' in HTMLElement.prototype
intrue
, and every event should be added viaaddEventListener
to avoid conflicts with other possible events.b.onmouseleave
should beb.addEventListener('mouseleave', ...)
and the other too, or you can usehandleEvent
with an object right away.As summary, this is how I would've written that:
Nice ✨
if you look closer, you also have one object as listener, with 4 methods, instead of N x 3 functions per each
.win-btn
on the page ... it's both a RAM and a CPU win ;-)Do you always prefer this syntax over normal syntax? Since you have a ton of experience in JS, I would like to know what more improvisations can be made 😬. Please give your feedback on part 3 also
not sure this answers your question: webreflection.medium.com/dom-handl... 👋