Js capture mouse wheel event code

2020-03-30 00:54:54
OfStack

I saw a pen test of a person's advanced front end interview before

It requires writing code by hand, and one of the questions is to make a picture presentation

Similar to baidu picture at the bottom of the small thumbnail that display bar

And then we need to have a mouse wheel to scroll bigger and smaller

I really don't know how to do this, looking for information on the Internet

Discover an event that can capture an onmousewheel

It then determines whether to roll forward or backward based on the positive or negative values of event.wheeldelta

Just write a small example, by the way to capture the keyboard keys, not too beautiful no line feed

Because what we did with textNode, we couldn't put in the HTML code

Speaking of which, can this be used to prevent XSS injection?

 
<body onkeydown="showKey()" onmousewheel="showKey()">

 
function showKey(){ 
if(event.wheelDelta){

 
//Plus 120 is roll forward and minus 120 is roll back
var textNode = document.createTextNode(event.wheelDelta+" "); 
document.body.appendChild(textNode); 
document.body.normalize(); 
} 
if(event.keyCode) 
{ 
var textNode = document.createTextNode(event.keyCode+" "); 
document.body.appendChild(textNode); 
document.body.normalize(); 
} 
}

It also happens to use one of the blocks of the textNode element that we just looked at in the advanced design today

Method to merge multiple textnodes

 
normalize();