JS events-scroll wheel events

JS events-scroll wheel events

I learned about the mouse events such as onmouseover and onmousedown. Today, we are looking at the scroll wheel events of the mouse. browser compatibility is always quite disgusting. Today, we are going to be disgusted with it, look at this disgusting mouse scroll event!

 

Scroll wheel event onIn IE and Google Chrome, onmousewheelThis event is implemented, but the onmousewheel is not recognized under Firefox FF,DOMMouseScroll is required for FF, and an event must be added as an "event listener" to be valid.;

We all know that event listening is used to bind events:

In IE, event listening is implemented through attachEvent.

In Chrome and FF, event listening is implemented through addEventListener.

 

This scene is disgusting:

Event monitoring wheel events

Google addEventListener onmousewheel

IE attachEvent onmousewheel

FF addEventListener DOMMouseScroll

 

For browser compatibility, we encapsulate a "function bound to events"

 

function addEvent(obj,xEvent,fn) {    if(obj.attachEvent){      obj.attachEvent('on'+xEvent,fn);    }else{      obj.addEventListener(xEvent,fn,false);    }}

Window. onload = function () {// then use our own encapsulated function to bind events to the div, var oDiv = document. getElementById ('div1 '); addEvent (oDiv, 'mousewheel', onMouseWheel); addEvent (oDiv, 'domainmousescroll ', onMouseWheel); // when a scroll wheel event occurs, run the onMouseWheel function onMouseWheel () {alert ('hahaha ');}}

Sometimes, when you scroll the scroll wheel, you need to know whether the scroll wheel is rolled up or down.

 

The returned values of event. wheelDelta in IE and Chrome indicate whether the scroll wheel is rolled up or down.

When the return value is positive, it means to roll up

When the returned value is a negative value, it indicates that the value is rolled down.

However, event. wheelDelta does not work under Firefox,In Firefox, you need to use event. detail to know whether the scroll wheel is rolled up or down.Firefox has the following differences:

When the returned value is a positive value, it indicates that the data is rolled down.

When the returned value is a negative value, it indicates that the value is rolled up.

 

Next, the div height increases when the scroll wheel is scroll down, And the div height decreases when the scroll wheel is rolling up.

1. You need to define a flag where the scroll wheel is rolled up or down.

2. browser compatibility is required

3. Disable default browser behavior.

 

Window. onload = function () {var oDiv = document. getElementById ('div1 '); function onMouseWheel (ev) {/* When a scroll wheel event occurs, perform some operations */var ev = ev | window. event; var down = true; // defines a flag. When the scroll wheel is rolled down, execute some operations down = ev. wheelDelta? Ev. wheelDelta <0: ev. detail> 0; if (down) {oDiv. style. height = oDiv. offsetHeight + 10 + 'px ';} else {oDiv. style. height = oDiv. offsetHeight-10 + 'px ';} if (ev. preventDefault) {/* FF and Chrome */ev. preventDefault (); // block default events} return false;} addEvent (oDiv, 'mousewheel ', onMouseWheel); addEvent (oDiv, 'dommousescroll', onMouseWheel );} function addEvent (obj, xEvent, fn) {if (obj. attachEvent) {obj. attachEvent ('on' + xEvent, fn);} else {obj. addEventListener (xEvent, fn, false );}}