Checks the browser's support for events

Since jquery made a feature detective, the West has never been so enthusiastic about browsers. In the past, JavaScript and Dom were everywhere as bugs. In the era when artists dominated the front-end, there were only two extreme ways for people to prohibit script running, and browser vendors were very aggressive (IE6 was also very active ). In this year, base2 and prototype2 have done the best, of course, dojo and Yui are also good. However, after opera and Safari have established full support for Dom in the last five years, the world is divided into two halves, half of which is the chaotic world dominated by IE, which has such rich private features, CSS expressions, HTC, CSS filters, VML, userdata, XML data island, the earliest Ajax support, and the best DHTML support APIs (innerhtml, innertext, outerhtml, outertext, insertadjactentxxx, offsetxxx, clientxxx, scrollxxx, range, designMode, sertrow, insertcell, and other dynamic table operations Apis ......), No wonder IE will win! However, Internet Explorer has laid a lot of ground. In addition, Internet Explorer does not upgrade any other browser so quickly, so we have to fix many bugs. So many browsers and so many versions are necessary. Now we can see that the event-related API was basically moved by Microsoft from the desktop. Later, W3C added a lot of events starting with Dom, But there was almost no one except dommousescroll. N multiple events are a headache compared with sniffing browsers one by one.

John resig said that class libraries are used to shield the differences between browsers. In this article abroad, we have a detailed analysis of event support (note that John resig often uses this blog. You can regard it as the bar of the jquery core group, they often talk with other experts about the browser's Arabian Nights and study the alchemy of JavaScript ). In the event system, it is obvious that IE supports mouseenter and mouseleave. Opera supports Right-click menus but does not allow you to operate on them using APIs similar to contextmenu, as well as onbeforepaste, onbeforecut events related to input elements, supported by IE and WebKit, but not by FF ...... Very messy. In general, we can use the for... in loop to traverse it, or simply detect it as follows:

'Onclick' in document.doc umentelement; // true 'onclick2' in document.doc umentelement; // false
 

Unfortunately, this is not accurate because we can add custom attributes with the same name. Some people say that it is not feasible to detect users before they are added, so some events are only available for specific elements.

 
'Onreset' in document.doc umentelement; // false 'onreset' in document. createelement ('input'); // true
 

In the standard browser, we can use setattrubute to assign a value to a known event name as an element. This value is automatically packaged into a function. If it is not an event name, its type is not changed. Then I will check whether it is a function!

 
VaR El = document. createelement ('div '); El. setattribute ('onclick', 'Return; '); alert (typeof el. onclick); // "function" El. setattribute ('onclick2', 'Return; '); alert (typeof el. onclick2); // "undefined"
 

Unfortunately, due to the well-known reasons, the setattribute of IE is very different from that of W3C, and IE is output as is. In addition, IE does not have a generalized function (native object method). Its API does not have name, call, apply and tostring, so it cannot determine whether they are functions. Based on the above two methods, let's take a look at what monsters are produced by foreigners ......

VaR iseventsupported = (function () {// use module mode var tagnames = {// specific event on a specific element 'select': 'input', 'change ': 'input', 'submit ': 'form', 'reset': 'form', 'error': 'img', 'load': 'img ', 'abort ': 'img '} function iseventsupported (eventname, element) {element = element | document. createelement (tagnames [eventname] | 'div '); eventname = 'on' + eventname; // when using 'setattribute', ie skips "Unload", WebKit skips "UN Load "and" resize ", whereas 'in'" catches "Those var issupported = (eventname in element); // dom0 if (! Issupported) {// if it has no 'setattribute' (I. e. doesn' t implement node interface), try generic element if (! Element. setattribute) {element = document. createelement ('div ');} If (element. setattribute & element. removeattribute) {element. setattribute (eventname, ''); issupported = typeof element [eventname] = 'function'; // if property was created, "Remove it" (by setting value to 'undefined') if (typeof element [eventname]! = 'Undefined') {element [eventname] = void 0;} element. removeattribute (eventname) ;}element = NULL; return issupported;} return iseventsupported ;})();

</P> <p> <! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead id = "head"> <br/> <Meta charset = "UTF-8"/> <br/> <title> situ zhengmei </title> </P> <p> <SCRIPT type = "text/JavaScript" charset = "UTF-8 "> <br/> window. onload = function () {</P> <p> var iseventsupported = (function () {// use module mode </P> <p> var tagnames = {// specific events on specific elements <br/> 'select': 'input ', 'change': 'input', <br/> 'submit ': 'form', 'reset': 'form', <br/> 'error': 'im G', 'load': 'img ', 'abort': 'img '<br/>}</P> <p> function iseventsupported (eventname, element) {</P> <p> element = element | document. createelement (tagnames [eventname] | 'div '); <br/> eventname = 'on' + eventname; </P> <p> // when using 'setattribute ', IE skips "Unload", WebKit skips "Unload" and "resize", whereas 'in' "catches" Those <br/> var issupported = (eventname in element ); // dom0 </P> <p> If (! Issupported) {<br/> // if it has no 'setattribute' (I. e. doesn' t implement node interface), try generic element <br/> If (! Element. setattribute) {<br/> element = document. createelement ('div '); <br/>}< br/> If (element. setattribute & element. removeattribute) {<br/> element. setattribute (eventname, ''); <br/> issupported = typeof element [eventname] = 'function'; </P> <p> // if property was created, "Remove it" (by setting value to 'undefined') <br/> If (typeof element [eventname]! = 'Undefined') {<br/> element [eventname] = void 0; <br/>}< br/> element. removeattribute (eventname); <br/>}</P> <p> element = NULL; <br/> return issupported; <br/>}< br/> return iseventsupported; <br/>}) (); <br/> function W (name, element) {<br/> document. write (name + ':' + (<br/> iseventsupported (name, element) <br/>? '<Span style = "background-color: green; color: White;"> true </span>' <br/>: '<span style = "background-color: red; color: White; "> false </span> '<br/>) +' <br> '); <br/>}</P> <p> document. write ('<PRE>' + iseventsupported + '</PRE> <br>'); </P> <p> document. write ('<H2> mouse events: </H2>'); </P> <p> W ('click '); <br/> W ('dblclick'); <br/> W ('mousedown'); <br/> W ('mouseup '); <br/> W ('mouseover'); <br/> W ('mousemove '); <br/> W ('mouseout '); </P> <p> document. write ('<H2> key events: </H2>'); </P> <p> W ('keypress '); <br/> W ('keylow'); <br/> W ('keyup'); </P> <p> document. write ('<H2> HTML events </H2>'); </P> <p> W ('load'); <br/> W ('unload ', window); <br/> W ('abort '); <br/> W ('error'); </P> <p> document. write ('<H2> View events </H2>'); </P> <p> W ('resize', window ); <br/> W ('scroll '); </P> <p> document. write ('<H2> Form Events: </H2>'); </P> <p> W ('submit '); <br/> W ('reset'); </P> <p> document. write ('<H2> Form Controls \ 'events: </H2>'); </P> <p> W ('select '); <br/> W ('change'); </P> <p> document. write ('<H2> activation events: </H2>'); </P> <p> W ('focal '); <br/> W ('blur'); </P> <p> document. write ('<H2> mshtml DOM events: </H2>'); </P> <p> W ('cut '); <br/> W ('copy'); <br/> W ('paste '); <br/> W ('beforecut '); <br/> W ('beforecopy'); <br/> W ('beforepaste '); <br/> W ('afterupdate '); <br/> W ('beforeupdate'); <br/> W ('cellchange'); <br/> W ('dataavailable '); <br/> W ('datasetchanged '); <br/> W ('datasetcomplete'); <br/> W ('errorupdate '); <br/> W ('rowenter'); <br/> W ('rowexit'); <br/> W ('rowsdelete '); <br/> W ('drag'); <br/> W ('dragstart'); <br/> W ('dragenter '); <br/> W ('dragover'); <br/> W ('dragleave '); <br/> W ('dragend '); <br/> W ('drop'); <br/> W ('selectstart'); <br/> W ('mouseenter '); <br/> W ('mouseleave '); <br/> W ('activate'); <br/> W ('beforeactivate '); <br/> W ('destactivate'); <br/> W ('foredeactivate'); <br/> W ('focusin '); <br/> W ('focusout'); <br/> W ('stop', document); <br/> W ('readystatechang '); <br/> W ('beforeprint', document. body); <br/> W ('afterprint', document. body); <br/> W ('beforeunload', window); </P> <p> document. write ('<H2> unexistent (most likely) Events: </H2>'); </P> <p> W ('click2 '); <br/> W ('foobarbaz'); </P> <p> document. write ('<H2> unexistent in opera <= 10a </H2>'); </P> <p> W ('textmenu '); </P> <p> document. write ('<H2> iPhone touch/gesture events </H2>'); </P> <p> W ('touchstart '); <br/> W ('touchend'); <br/> W ('touchmove '); <br/> W ('touchcancel '); </P> <p> document. write ('<br>'); </P> <p> W ('gesturestart'); <br/> W ('gesturechange '); <br/> W ('gestureend'); </P> <p> document. write ('<H2> HTML5 events </H2>'); </P> <p> W ('hashchange', document. body); <br/> W ('online', document. body); <br/> W ('offline', document. body); <br/> W ('message', window); <br/> W ('undo ', document. body); <br/> W ('redo ', document. body); <br/> W ('store', window); <br/> W ('popstate', window ); </P> <p> W ('canplay', document. createelement ('video'); <br/> W ('secret', document. createelement ('video'); <br/> W ('secret', document. createelement ('video'); </P> <p> document. write ('<H2> proprietary </H2>'); </P> <p> W ('pageshow ', window); <br/> W ('pagehide ', window); </P> <p> }; </P> <p> </SCRIPT> </P> <p> </pead> <br/> <body> </P> <p> </body> <br/> </ptml> <br/>

RunCode

Even some proprietary events of HTML5 and iPhone touch can be detected.

This feature is also supported in jquery1.4 α 2, but it is used in earlier versions and is not as good as the one written above!

 
// Jquery1.4 α 2var eventsupported = function (eventname) {var El = document. createelement ("Div"); eventname = "on" + eventname; var issupported = (eventname in El); If (! Issupported) {El. setattribute (eventname, "Return;"); issupported = typeof El [eventname] = "function" ;}el = NULL; return issupported ;};