 Normalizing Event Triggers in JavaScript
For those of you who are too lazy to keep up with the standards of the current JavaScript versions, this will suffice: - elem.onmouseup = SomeFunction;
However, that method has a lot of limitations. - Only one function per event trigger
- No control over bubbling/capturing
- Dynamic addition and removal of events requires creation and deletion of objects
- It's old
The correct, modern way of handling event triggers are these methods: - addEventListener, removeEventListener
- attachEvent, detachEvent
You see that there are two different ways, right? That's because, yet again, Microsoft decided to impose their own methods on us. In concept, these pairs of functions do the exact same thing, but in reality they don't. Microsoft's way (attachEvent/detachEvent) does not allow you to control whether or not you want to capture events.
The fact that there are two different sets of methods for doing this means that we need to know which ones the browser supports in order to know which ones to use. You could do so with if statements checking whether the browser supports addEventListener or attachEvent, but you'll likely have so many event triggers that it won't be practical. So, I've written two functions do it for you: - /**
-
* Add an event listener to an object
-
* @param object
-
* @param evt event
-
* @param func function
-
* @param capture
-
* @return boolean
-
*/
-
function AddEvent(object, evt, func, capture)
-
{
-
if(typeof func != 'function')
-
{
-
return false;
-
}
-
if(object.addEventListener)
-
{
-
object.addEventListener(evt, func, capture);
-
return true;
-
}
-
else if(object.attachEvent)
-
{
-
object.attachEvent('on' + evt, func);
-
return true;
-
}
-
return false;
-
}
-
-
/**
-
* Removes an event listener
-
* @param object
-
* @param evt event
-
* @param func function
-
* @param capture
-
* @return boolean
-
*/
-
function RemoveEvent(object, evt, func, capture)
-
{
-
if(typeof func != 'function')
-
{
-
return false;
-
}
-
if(object.removeEventListener)
-
{
-
object.removeEventListener(evt, func, capture);
-
return true;
-
}
-
else if(object.detachEvent)
-
{
-
object.detachEvent('on' + evt, func);
-
return true;
-
}
-
return false;
-
}
Here's how to use them: - AddEvent(elem, 'mouseup', SomeFunction, false);
-
RemoveEvent(elem, 'mouseup', SomeFunction, false);
- The first parameter is an element to add the event listener to
- The second parameter is the name of the event (without "on")
- The third parameter is the function (the actual function object with the parentheses)
- The last parameter is a boolean asking determining whether or not to capture the event
This will simplify your code. The only thing that you have to look out for is that even if you set the last parameter to true, it will still bubble in Internet Explorer instead of capture, so you still have to code for bubbling. Those are the breaks.
These functions will return false if neither of these methods are available, but all modern browsers support at least one of these methods, so it's safe to ignore it.
You should keep both of these events in a global JavaScript file that you use in all of your scripts to simplify event handling.
Original Source: Normalizing Event Triggers in JavaScript Normalizing Event Objects in JavaScript
Just like almost everything worth using in JavaScript, Microsoft's Event object and the standard Event object are not the same. Because of this, we'll need to normalize the Event object in order to use it.
For those of you who are unfamiliar with JavaScript's Event objects, they are automatically sent to Function objects that are attached to an event trigger as the first parameter, no matter what you do.
The Event object has a lot of different properties, a lot of which are not cross-browser compatible. Differences consist of: - layerX/layerY and offsetX/offsetY
- relatedTarget and fromElement/toElement
- target and srcElement
- keyCode and charCode
So, I wrote a function to normalize all of these into this variables (respectively): - offsetX/offsetY
- relatedTarget
- src
- key
You can, of course, change the names of the variables in the follow function if you'd like to. This will make it so that you can use event objects without worrying about cross-browser issues. - /**
-
* Gets an event with all needed properties
-
* @param e event
-
* @return event object
-
*/
-
function GetEvent(e)
-
{
-
if(!e)
-
{
-
e = window.event;
-
}
-
-
if(e.layerX)
-
{
-
e.offsetX = e.layerX;
-
e.offsetY = e.layerY;
-
}
-
-
if(e.type == 'mouseover' && !e.relatedTarget)
-
{
-
e.relatedTarget = e.fromElement;
-
}
-
else if(e.type == 'mouseout' && !e.relatedTarget)
-
{
-
e.relatedTarget = e.toElement;
-
}
-
-
e.src = e.srcElement || e.target;
-
e.key = e.keyCode || e.charCode;
-
-
return e;
-
}
Here's how you use it: - function HandleEvent(e)
-
{
-
// Normalize the event
-
e = GetEvent(e);
-
-
// Do stuff with the event object
-
}
And now you can simplify your event handling code by actually changing the event object to be normalized from browser to browser. You should keep this function handy in a file that you include in all of your scripts.
Original Source: Normalizing Event Objects in JavaScript 3  8090  
Why not combine the two?
I have added a table of events so that when the event is fired we can convert event data to "uniform" event format, before the event is fired.
If multiple handlers are attached to a single event for a single object then they are called in the order they were added, and a single instance of the event return data exists for all methods. -
var globalthunkingindex = new Array();
-
-
function ThunkingHandlerIndexObject(object, evt, func, capture)
-
{
-
this.object = object;
-
this.event = evt;
-
this.func = new Array();
-
this.func.push(func);
-
-
this.capture = capture;
-
}
-
-
function FindGlobalThunkingEntry(obj, eventtype)
-
{
-
for( var i = 0; i < globalthunkingindex.length; i++)
-
{
-
if( obj == globalthunkingindex[i].object)
-
{
-
// found same object is this event?
-
if( eventtype == globalthunkingindex[i].event)
-
{
-
return i;
-
}
-
}
-
}
-
return -1;
-
}
-
function AddHandlerToGlobalThunkingIndex(object, eventtype, func, capture)
-
{
-
// DH added feb 08
-
var index = FindGlobalThunkingEntry(object, eventtype);
-
if( index < 0 )
-
{ // doesn't exist
-
globalthunkingindex.push( new ThunkingHandlerIndexObject(object, eventtype, func, capture));
-
}
-
else
-
{
-
// does exist, add this function to list
-
globalthunkingindex[index].func.push(func);
-
}
-
/////////////DH
-
}
-
function RemoveHandlerFromGlobalThunkIndex(obj, eventtype, func)
-
{
-
// DH added feb 08
-
var lindex = FindGlobalThunkingEntry(obj, eventtype);
-
if( lindex < 0) return false;
-
-
var lobj = globalthunkingindex[lindex];
-
if( lobj.func.length > 0)
-
{
-
for( var findex = 0; findex < lobj.func.length; findex++)
-
{
-
if( lobj.func[findex] = func)
-
{
-
// this is our func to remove
-
break;
-
}
-
}
-
lobj.func.splice(findex,1);
-
}
-
if( lobj.func.length == 0 )
-
{
-
// list is empty we can remove this node
-
globalthunkingindex.splice(lindex,1);
-
}
-
} /////////////DH
-
-
The previous code was modified to use our event lookup and data normalization. -
/**
-
* Add an event listener to an object
-
* @param object
-
* @param evt event
-
* @param func function
-
* @param capture
-
* @return boolean
-
*/
-
-
-
function AddEvent(object, evt, func, capture)
-
{
-
if(typeof func != 'function')
-
{
-
return false;
-
}
-
// DH added this line
-
AddHandlerToGlobalThunkingIndex(object, evt, func, capture);
-
-
if(object.addEventListener)
-
{
-
/// DH modified from
-
// object.addEventListener(evt, func, capture);
-
// to
-
object.addEventListener(evt, GlobalThunkHandleEvent, capture);
-
-
return true;
-
}
-
else if(object.attachEvent)
-
{
-
/// DH modified from
-
// object.attachEvent('on' + evt, func);
-
// to
-
object.attachEvent('on' + evt, GlobalThunkHandleEvent);
-
-
return true;
-
}
-
return false;
-
}
-
-
/**
-
* Removes an event listener
-
* @param object
-
* @param evt event
-
* @param func function
-
* @param capture
-
* @return boolean
-
*/
-
function RemoveEvent(object, evt, func, capture)
-
{
-
if(typeof func != 'function')
-
{
-
return false;
-
}
-
-
if(object.removeEventListener)
-
{
-
object.removeEventListener(evt, func, capture);
-
-
// DH added this line, must occur after event is unattached
-
RemoveHandlerFromGlobalThunkIndex( object, evt, func);
-
-
return true;
-
}
-
else if(object.detachEvent)
-
{
-
object.detachEvent('on' + evt, func);
-
-
// DH added this line, must occur after event is unattached
-
RemoveHandlerFromGlobalThunkIndex( object, evt, func);
-
-
return true;
-
}
-
return false;
-
}
-
/**
-
* Gets an event with all needed properties
-
* @param e event
-
* @return event object
-
*/
-
function GetEvent(e)
-
{
-
if(!e)
-
{
-
e = window.event;
-
}
-
-
if(e.layerX)
-
{
-
e.offsetX = e.layerX;
-
e.offsetY = e.layerY;
-
}
-
-
if(e.type == 'mouseover' && !e.relatedTarget)
-
{
-
e.relatedTarget = e.fromElement;
-
}
-
else if(e.type == 'mouseout' && !e.relatedTarget)
-
{
-
e.relatedTarget = e.toElement;
-
}
-
-
e.src = e.srcElement || e.target;
-
e.key = e.keyCode || e.charCode;
-
-
return e;
-
}
-
And finally the code that gets it all done: -
function GlobalThunkHandleEvent(e)
-
{
-
// Normalize the event
-
e = GetEvent(e);
-
// locate redirection
-
var index = FindGlobalThunkingEntry(e.src, e.type);
-
// Do stuff with the event object
-
var handlerlist = globalthunkingindex[index].func;
-
-
var IsNotMasked = true;
-
for( var i =0; i < handlerlist.length; i++)
-
{
-
if( handlerlist[i](e) == false )
-
{
-
IsNotMasked = false;
-
}
-
}// note a single instance of event data exists
-
// care must be taken when attempting to mask events
-
//
-
-
// is this IE only?
-
// e.returnValue = IsNotMasked;
-
-
return IsNotMasked;
-
}
-
-
This is by no means optimized. It should be elementary to modify the 2 search algorithms to cut down on the time spent looking. Or add a quick hash.
Happy coding.
Dan -
Why not combine the two?
I[code]
function GlobalThunkHandleEvent(e)
{
// Normalize the event
e = GetEvent(e);
// locate redirection
var index = FindGlobalThunkingEntry(e.src, e.type);
Sorry I haven't tested this on any other browsers. I am using IE.
My concern would be that the "e.type" in function GlobalThunkHandleEvent(e)
may not be as plain as IE? I don't know. Does any KNow if this becomes something like "on"+"mousemove" as apposed to "mousemove"? If so it can be corrected in "GetEvent".
Thanks.
Dan -
My concern would be that the "e.type" in function GlobalThunkHandleEvent(e)
may not be as plain as IE? I don't know. Does any KNow if this becomes something like "on"+"mousemove" as apposed to "mousemove"? If so it can be corrected in "GetEvent".
It would be "mousemove". See this example.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Web Science |
last post by:
Site and Features: http://www.eigensearch.com
Search engine, eigenMethod, eigenvector, mathematical, manifolds, science, technical, search tools, eigenmath, Jacobian, quantum, mechanics,...
|
by: Donald Smith |
last post by:
Hey,
Can anyone tell me how to using cross-coding in .Net? Like In a C# project
file, being able to use a VB.NET module. Thanks.
Donald
|
by: Web Science |
last post by:
Site and Features: http://www.eigensearch.com
Search engine, eigenMethod, eigenvector, mathematical, manifolds, science, technical, search tools, eigenmath, Jacobian, quantum, mechanics,...
|
by: Mikkel christensen |
last post by:
Hi there
I wonder if any of you could point me in a direction where I can find some
usefull information about coding standarts.
I have some generel experiense in programming but I lack many...
|
by: john_williams_800 |
last post by:
Hi;
I am thinking of working on a site for a local nonprofit group.
Since I will have the option of starting from the beginning I thought I
would look into making the site Bobby compliant.
...
|
by: Jeff Rodriguez |
last post by:
Here's what I want do:
Have a main daemon which starts up several threads in a Boss-Queue structure.
From those threads, I want them all to sit and watch a queue. Once an entry
goes into the...
|
by: saravanansvks |
last post by:
Dear Friends,
I have prepared a programme in Visual Basic for SHAPE OPERATOR.But my coding are changing the shape only.It does not changes the fill style of the shape tool .And it is not giving ant...
|
by: ryann18 |
last post by:
I have a midterm tomorrow and I need some help! I am not good at Java at all I have the worst teacher on the face of the earth! He tells not teaches! But can someone give me some pointers!! He...
|
by: telsave |
last post by:
Hi Hope someone out there can help me. I have just developed my first
WEB page to sell an ebook I have written. I have of course included a
squeeze page to capture details but what I am looking for...
|
by: ampo |
last post by:
Hello.
Can anyone help with cross-domain problem?
I have HTML page from server1 that send xmlHTTPRequest to server2.
How can I do it?
Thanks.
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
| |
