For example, to get the trigger event of the element reference in IE browser is: event.srcelement, in the FF browser is: Event.target, in addition to the FF browser to get the cursor relative to the position of the page is Event.pagex, and IE browser under the treatment is not the same, of course, there are Some like "block event bubbling" and "Cancel browser default behavior", and so on, different browsers have different ways, if we want to make JavaScript in different browsers to handle the normal event code, it is necessary to judge the processing separately. jquery now provides us with a unified compatibility handler $.event.fix (e), which is not officially used in the documentation, and I found it possible to read the framework code.
First, how to use
The event-compliant handling of jquery is mainly done with the following simple steps:
1, in the page Head area to refer to the jquery framework library files;
2. Define an event-handling method and unify the incoming event parameters at the place of the call;
3, in the event method, the first use of $.event.fix to convert old events to new event references;
4, after the event method is used after the compatible processing of event object methods and properties.
Ii. Use of examples
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> using jquery's $.event.fix function to unify browser event handling </title>
<script type= "Text/javascript" src= "Http://img.jb51.net/jslib/jquery/jquery.js" ></script>
<body>
<input type= "button" value= "Http://wwww.jb51.net" onclick= "EventHandler" (event)/>
<script type= "Text/javascript" >
Please use a different browser to test this page, you will see the same result
function EventHandler (e)
{
var event = $.event.fix (e);
var elem = Event.target;
Alert (' Current Click object's tag name is: ' + elem.tagname ');
Alert (' Current click Button text is: ' + elem.value ');
Alert (' Pagex: ' + Event.pagex + ', Pagey: ' + event.pagey);
Get Key Code
Event.keycode
Cancel Browser default behavior
Event.preventdefault ();
Cancel Event Bubbling
Event.stoppropagation ();
//... It's not a very common attribute.
}
</script>
</body>
Three, JQuery $.event.fix method defines the original code reference
Copy Code code as follows:
Fix:function (Event)
{
if (Event[expando] = = True)
return event;
Store a copy of the original event object
and "clone" to set read-only properties
var originalevent = event;
event =
{
Originalevent:originalevent
};
var props = "Altkey attrchange attrname Bubbles button cancelable charcode clientX clientY ctrlkey currenttarget data deta Il eventphase fromelement handler keycode metakey newvalue originaltarget pagex pagey prevvalue relatedNode relatedTarget ScreenX ScreenY shiftkey srcelement target timeStamp toelement type view Wheeldelta which ". Split (" ");
for (var i = props.length; i; i--)
Event[props[i]] = originalevent[props[i]];
Mark it as fixed
Event[expando] = true;
Add Preventdefault and Stoppropagation since
They won't work on the clone
Event.preventdefault = function ()
{
If Preventdefault exists run it on the original event
if (Originalevent.preventdefault)
Originalevent.preventdefault ();
Otherwise set the ReturnValue property of the original event to False (IE)
Originalevent.returnvalue = false;
};
Event.stoppropagation = function ()
{
If stoppropagation exists run it on the original event
if (originalevent.stoppropagation)
Originalevent.stoppropagation ();
Otherwise set the Cancelbubble property of the original event to True (IE)
Originalevent.cancelbubble = true;
};
Fix TimeStamp
Event.timestamp = Event.timestamp | | Now ();
Fix target property, if necessary
if (!event.target)
Event.target = Event.srcelement | | Document Fixes #1925 where srcelement might is defined either
Check if Target is a textnode (Safari)
if (Event.target.nodeType = 3)
Event.target = Event.target.parentNode;
Add Relatedtarget, if necessary
if (!event.relatedtarget && event.fromelement)
Event.relatedtarget = Event.fromelement = = Event.target? Event.toElement:event.fromElement;
Calculate pagex/y if missing and clientx/y available
if (Event.pagex = = null && event.clientx!= null)
{
var doc = document.documentelement, BODY = document.body;
Event.pagex = Event.clientx + (Doc && Doc.scrollleft | | | body && Body.scrollleft | | 0)-(doc.clientleft | | 0);
Event.pagey = Event.clienty + (Doc && Doc.scrolltop | | | body && Body.scrolltop | | 0)-(Doc.clienttop | | 0) ;
}
Add which for key events
if (!event.which && (Event.charcode | | event.charcode = = 0)? event.charCode:event.keyCode))
Event.which = Event.charcode | | Event.keycode;
Add Metakey to Non-mac browsers (with Ctrl for PCs ' s and Meta for Macs)
if (!event.metakey && event.ctrlkey)
Event.metakey = Event.ctrlkey;
Add which for click:1 = = left; 2 = middle; 3 = Right
Note:button isn't normalized, so don ' t use it
if (!event.which && Event.button)
Event.which = (Event.button & 1 1: (Event.button & 2 3: (Event.button & 4 2:0));
return event;
}
Author: Webflash
Source: http://webflash.cnblogs.com
