Detailed explanation of mouse wheel events in js (firefox multi-browser)_javascript skills

Attached events

After my testing, IE/Opera are of the same type, and you can use attachEvent to add wheel events.

Copy code The code is as follows:

/*IE registration event*/
if( document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}

Firefox uses addEventListener to add scroll wheel events

Copy code The code is as follows:

/*Firefox registration event*/
if(document.addEventListener){
document.addEventListener( 'DOMMouseScroll',scrollFunc,false);
}

Safari and Chrome are of the same type, and events can be added using HTML DOM
window.onmousewheel=document.onmousewheel=scrollFunc;/ /IE/Opera/Chrome
Except Firefox, all others can use HTML DOM to add events, so add events using the following method

Copy code The code is as follows:

/*Register event*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail and wheelDelta

Judge whether the scroll wheel is up or down Compatibility must also be considered in browsers. Among the five major browsers (IE, Opera, Safari, Firefox, Chrome), Firefox uses detail, and the other four use wheelDelta; the two are only inconsistent in value, which means the meaning is the same, detail and wheelDelta only take two values ​​each, detail only takes ±3, and wheelDelta only takes ±120, where positive numbers represent upwards and negative numbers represent downwards.

Copy code The code is as follows:

Scroll value:(IE/Opera)

Scroll value: (Firefox)

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Scroll wheel value effect -http://www.jb51.net/</title> <p><label for="wheelDelta">Scroll value:</label>(IE/Opera)<input type="text" id="wheelDelta"></p> <p><label for="detail">Scroll value: (Firefox)</label><input type="text" id="detail"></p>