Javascript: Cross-Browser EventArgs

by Jon Davis 1. April 2008 22:53

So we came across this need for a consistent Event object. Here, world!

  • eventArgs
    • button (int)
    • buttonLeft (bool)
    • buttonRight (bool)
    • buttonMiddle (bool)
    • domEvent (window.event)
    • keyCode (int)
    • charCode (int)  << not sure about this one :(
    • char                << or this :( 
    • offsetX (int)
    • offsetY (int)
    • relatedElement (DOM Element)
    • srcElement (DOM Element)

var EventArgs = function(e, _domElement) {
    var msie = window.navigator.userAgent.toLowerCase().indexOf('msie') > -1;
    if (!e) e = window.event; //msie
    this.domEvent = e;
    this.srcElement = _domElement;
    if (!this.domElement) {
        if (e.srcElement) this.srcElement = e.srcElement;
        else if (e.target) this.srcElement = e.target;
    }
    
    this.button = e.button;
    // use msie's button map as it has more data
    if (!msie &&
        (e.type == "mousedown" ||
         e.type == "mouseup" ||
         e.type == "mousemove")) {
         switch (this.button) {
            case 0:
                this.button = 1; // left
                break;
            case 1:
                this.button = 4; // middle
                break;
            case 2:
                this.button = 2; // right
                break;
         }
    }

    var LEFT = 1;
    var RIGHT = 2;
    var MIDDLE = 4;
    this.buttonLeft = (this.button & LEFT) == LEFT;
    this.buttonRight = (this.button & RIGHT) == RIGHT;
    this.buttonMiddle = (this.button & MIDDLE) == MIDDLE;
   
    this.offsetX = e.offsetX;
    this.offsetY = e.offsetY;
    if (!this.offsetX && !msie && e.layerX) {
        this.offsetX = e.layerX;
        this.offsetY = e.layerY;
    }
    this.relatedElement = e.relatedTarget;
    if (e.type == "mouseover" && !this.relatedElement && msie && e.fromElement) {
        this.relatedElement = e.fromElement;
    }
    if (e.type == "mouseout" && !this.relatedElement && msie && e.toElement) {
        this.relatedElement = e.toElement;
    }
    this.keyCode = e.keyCode;
    this.charCode = e.charCode;
    if (!this.charCode) {
        if (e.shiftKey == false) {
            this.charCode = this.keyCode + 32; // hmmph .. todo: replace this

        } else {
            this.charCode = this.keyCode;  // yuck
        }
    }
    this.char = String.fromCharCode(this.charCode ? this.charCode : this.keyCode);
};

This is a lil wordy but more or less self-documenting.

So where you would normally pass event, instead pass new EventArgs(event). This abstracts away the browser differences based on the model described in the bulleted list at the top of this blog post. :)

<a href="#" onmouseup="doSomething(new EventArgs(event))">click me</a>  

kick it on DotNetKicks.com

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,


 

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen

About the author

Jon Davis (aka "stimpy77") has been a programmer, developer, and consultant for web and Windows software solutions professionally since 1997, with experience ranging from OS and hardware support to DHTML programming to IIS/ASP web apps to Java network programming to Visual Basic applications to C# desktop apps.
 
Software in all forms is also his sole hobby, whether playing PC games or tinkering with programming them. "I was playing Defender on the Commodore 64," he reminisces, "when I decided at the age of 12 or so that I want to be a computer programmer when I grow up."

Jon was previously employed as a senior .NET developer at a very well-known Internet services company whom you're more likely than not to have directly done business with. However, this blog and all of jondavis.net have no affiliation with, and are not representative of, his former employer in any way.

Contact Me 


Tag cloud

Calendar

<<  September 2020  >>
MoTuWeThFrSaSu
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar