MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

What is onmousewheel event of JavaScript?

In this article we will discuss about the onmousewheel event of JavaScript.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction:

As the name suggests the onmousewheel event is triggered when we scroll the mouse wheel either upward or downward. This is most commonly used in websites which displays maps and other pictures where the picture zooms out or zooms in when we scroll the mouse either upward or downward.

The particular even fires when mouse wheel button rerates on either direction. There is a specialty about onmousewheel event Compared to other events. The 'wheelDelta' object property is exposed by this event only. This particular object returns a value when it is rotated. The 'wheelDelta' object returns positive value when the wheel is rotated away from the user movement and it returns a negative value when the wheel is rotated towards the user. So based on the return value, user can decide to next action to be performed. Following is a basic sample to taste the event.

Listing 1: Sample showing basic event

<html>
<body>
    <p>Please place the pointer on top of the image and move the mouse wheel up and down.</p>
    <img id="sampleimage" 
         src="Mention the path where the image is kept" 
         onmousewheel="alert('Wheel Delta value is : ' + event.wheelDelta);">
</body>
</html>

Compatibility:

The onmousewheel event is supported in most commonly used web browsers e.g. IE6, Opera, Safari2, Firefox1.x. In Firefox2 onwards an equivalent method DOMMouseScroll is used.

Having said that, the following piece of code shows the binding of onmousewheel event method to the document object of the page.

Listing 2: Sample mouse wheel code snippet

var mousewheelevt = ( /Firefox/i.test ( navigator.userAgent ) ) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

if ( document.attachEvent ) //if IE (and Opera depending on user setting)
    document.attachEvent ( "on" + mousewheelevt, function(e) { alert ( 'Mouse wheel movement detected!' ) } )
else if ( document.addEventListener ) //WC3 browsers
    document.addEventListener ( mousewheelevt, function(e) { alert ( 'Mouse wheel movement detected!' ) }, false )

In the above code, an alert a message pops out whenever the mouse wheel is rolled on the page, which though illustrates the basic setup nicely. When this code is executed on Firefox, the event name "DOMMouseScroll" instead of "mousewheel" is used to bind the event to the target object, which in this case, is the document. It must be noted here that "DOMMouseScroll" can only be binded dynamically using addEventListener (), unlike regular events which can be directly attached to the target object.

How it works:

When this event is fired in non firefox browsers the event property "wheelDelta" is populated with an integer value positive or negative, which indicates that the mouse wheel is scrolled up or down and by no of clicks. In case of firefox browser the name of the property is "detail". In case of "wheelDelta”, the returned value is always multiple of 120. A value of 120 indicates that the mouse wheel has been moved 1 time up while a value of 120 indicates that the mouse wheel is moved 1 time down. In case of firefox browsers, the event property - "detail" returns a value which is a multiple of 1. If the mouse is scrolled 1 time up, the value returned for property "detail" is -1 where as if the mouse is scrolled 1 time down, the value returned is 1. This is the reverse of “wheelDelta”. The following table illustrates the methods, their properties and the returned values in each of the cases.

Event Name Event Property Up 1 click Up 2 click Down 1 click Down 2 click
onmousewheel for non firefox browsers wheeldelta ( For non firefox browsers ) 120 240 -120 -240
DOMMouseScroll in firefox browsers detail for firefox and opera browser -1 -2 1 2

Table 1: Events, properties and sample values

In the table above, it must be noted that the Opera browser response only to the "onmousewheel" event but it populates both the properties “wheelDelta” and "detail”. The property "detail" returns the same value in case of both firefox and opera browsers. Hence, to be on the safer side we must rely on the property “detail” which may return a different value depending upon the version of opera browser. Let us consider the following code.

Listing 3: Sample code snippet for an image slide show

<img id = "slideshow" src = "summer.jpg" />
 
<script type = "text/javascript" >
 
var myimages=[
    "summer.jpg",
    "spring.jpg",
    "winter.jpg"
]
 
var slideshow = document.getElementById("slideshow")
var nextslideindex = 0
 
function rotateimage(e){
    var evt = window.event || e //equalize event object
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    Nextslideindex = (delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    Nextslideindex = ( nextslideindex < 0 )? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    slideshow.src = myimages [ nextslideindex ]
    if ( evt.preventDefault ) //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false

}
 
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

if (slideshow.attachEvent) // if IE (and Opera depending on user setting)
    slideshow.attachEvent ( "on" + mousewheelevt, rotateimage )
else if ( slideshow.addEventListener ) //WC3 browsers
    slideshow.addEventListener( mousewheelevt, rotateimage, false )
 

</script>

When this code is executed, the page is loaded with the summer.jpg image. All the three images summer.jpg, winter.jpg and winter.jpg keep on changing when we scroll the mouse up or down.

Adding a mouse wheel event handler:

Let us consider the following code snippet

Listing 4: Sample code snippet for associating the mouse event.

<img id="myimage" src = "myimage.jpg" alt = "my image" />
<script>
var myimage = document.getElementById( "myimage" );
if ( myimage.addEventListener ) {
	// IE9, Chrome, Safari, Opera
	myimage.addEventListener( "mousewheel", MouseWheelHandler, false );
	// Firefox
	myimage.addEventListener( "DOMMouseScroll", MouseWheelHandler, false );
}
// IE 6/7/8
else myimage.attachEvent( "onmousewheel", MouseWheelHandler );

</script>

Here the code myimage.addEventListener associates the mousewheel event to the document object myimage. As a result, the image zooms in and zooms out in response to the mouse wheel.

Supported and unsupported browsers:

There is an important consideration while using mouse wheel events using java script. The browser compatibility plays a major role on the implementation of mouse movement implementation.

The following browsers support the mouse wheel event:

  • Internet Explorer 6 or above
  • Firefox 1.0 or above
  • Opera 9.0 or above
  • Safari

The following browser does not support the mouse wheel event:

  • Konqueror
  • Omniweb
  • iCab

While implementing the mousewheel event, the following things should be taken care of:

  • The wheel should not used to work in an expected manner. Normally the mouse wheel should be used to scroll the list of files as most of the users have the perception that mouse scroll lists files. In some cases the mouse wheel is also used to zoom in or zoom out an image.
  • It is not a good practice to rely heavily on JavaScript. So the users should not be forced to use the mouse scrolls.
  • The global scrollbars should be avoided as mixing these two will not be a good idea.

Conclusion

To conclude the discussion we can summarize the below points.

  • The onmousewheel event is triggered when the mouse is scrolled up or down.
  • Used in situations where we need to zoom in or zoom out a picture.
  • Used in situations where we need to change the images.
  • Most of the browsers support the onmousewheel event while firefox supports the DOMMousescroll event.
  • Most of the browsers support the wheeldelta event while firefox and opera supports the detail event.
  • Either of the methods - onmousewheel or DOMMouseScroll accepts an integer value along with their event properties.


Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login