Home arrow JavaScript arrow Page 7 - Handling events with the DOM - Part III
JAVASCRIPT

Handling events with the DOM - Part III


In this third part of our series, we will learn about Event objects, the "type" property, how to determine the target of an event, and more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
May 03, 2005
TABLE OF CONTENTS:
  1. · Handling events with the DOM - Part III
  2. · Another creature in an object-based world: the Event object
  3. · Determining the type of event: the "type" property
  4. · Targeting objects: determining the target of the event
  5. · Focusing on keys: determining which key has been pressed
  6. · The x-y game: determining mouse coordinates
  7. · Buttons from the bottom: detecting mouse buttons

print this article
SEARCH DEVARTICLES

Handling events with the DOM - Part III - Buttons from the bottom: detecting mouse buttons
(Page 7 of 7 )

 

In order to detect mouse buttons, we use two main properties: "which" and "button". Weíve already seen this Netscape property in key detection processes. However, these properties do not always work correctly when being used in a "click" event.

 

The "which" property assigns the following values for mouse buttons:

 

  • Left button: 1
  • Middle button (mouse wheel): 2
  • Right button: 3

 

The assignation sequence is logical, but currently, browser support is very limited. We need to look at the "button" property, which in the W3C event model uses the following values:

 

  • Left button: 0
  • Middle button: 1
  • Right button: 2

 

In Netscape 6+, the values are different:

 

  • Left button: 1
  • Middle button: 2
  • Right button: 3

 

And Mozilla assigns button values as follows:

 

  • Left button: 1
  • Middle button: 1
  • Right button: 2

 

Once again, incompatibilities crop up, because IE interprets mouse buttons differently:

 

  • Left button: 1
  • Middle button: 4
  • Right button: 2

 

Also, IE supports button combinations; for example, a value of 3, meaning that left and right buttons are combined, or 6, when the middle and right buttons are clicked at the same time. However, this is only available in the specifications. In practice, itís not actually supported.

 

Whew, here we have a wide gamut of button implementations, where none of them stick to a common sense assignment. Anyway, we can try to build a function for mouse button detection:

 

function detectMouseButton(e){

    var mousebutton;

    if (!e) var e=window.event;

    if(e.button){mousebutton=e.button;}

    else if(e.which){mousebutton=e.which;}

    alert('Mouse button: '+mousebutton);

}

 

Certainly, this function is not very suitable for practical use, but as an example it is good enough. From the above specifications, it can be deduced that weíre able to detect right clicking events too. This is a little more useful than the previous case, for instance if we need to build a customized context menu. The basic function to detect a right click would be something similar to this:

 

function detectRightClick(e){

    var rightclick='';

    if(!e) var e=window.event;

    if(e.which){

          (e.which==3)?rightclick='Right clicking!':rightclick='Not right clicking!';

    }

    else if(e.button){

          (e.button==2)?rightclick='Right clicking!':rightclick='Not right clicking!';

    }

    alert(rightclick);

}

 

And we call the function like this:

 

document.onmousedown=detectRightClick;

 

The above example will detect a right click event for most browsers, displaying the alert box with the corresponding messages according to the mouse buttons clicked. By the way, thatís not very creative, but it works pretty well. Another possibility for detecting right clicks is to implement the "oncontextmenu" event handler, but it functions only in IE and Mozilla. The JavaScript code is listed below:

 

function detectRightClick(e){

    alert( 'Your are right clicking now!');

}

document.oncontextmenu=detectRightClick;

 

Itís really simple, but not suitable for cross browser implementation. Anyway, if youíre working within an intranet environment, where the browser platform is IE, this might be a valid alternative to consider.

 

Finally, weíve developed valid solutions for solving common problems associated with event handling, and I feel that the whole experience was quite successful. The vast and intriguing arena of the Event Handling Model is not as difficult as it seems. Are you still with me? Fine, because weíre almost done. Just donít miss the final part.

 

Conclusion

 

Over this series, weíve covered the most relevant aspects of Event handling with the DOM. From the basics and core concepts regarding event handlers, to proper implementation for common event registration methods in Web documents, itís been a long way to go. Despite the tremendous effort we've devoted to this so far, event handling is still a huge area to be mastered. However, itís necessary to embrace the subject without feeling overcome by its complexity, building and reusing code that works for practical Web development applications. Having all of that knowledge at our disposal is more that enough to successfully face any event handling tasks.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials