What's a good example for browser-specific code necessary when not using e.g. jQuery?

Question

I'm looking for a good example where a framework/lib like jQuery removes the need for browser-specific code. Please note that I'm not looking for an example where jQuery makes things just easier or nice but specifically something where the same code wouldn't work for all common browsers.

As it'll be used for university stuff and just meant to be an example a very simple thing would be great (otherwise I'd probably use e.which vs e.keyCode )

Answer 1

Event handling is a good example, as it is so important for today's web applications.

element.addEventListener does not work in IE8 and below. These things are different in IE:

• You have to use element.attachEvent and 'on<event>' :

   element.addEventListener('click', handler, false); // W3C // vs. element.attachEvent('onclick', handler); // IE 

• As IE's event model is a bit different, it does not support listing to events in the capture phase:

   element.addEventListener('click', handler, true); // W3C // vs // not possible :( // IE 

• IE does not pass the event to the handler (it is available in via window.event ):

   function handler(event) { event; // W3C // vs window.event; // IE } 

• Inside the event handler, this does not refer to element the handler is bound to, but to window :

   function handler() { alert(window === this); // true // IE } 

  Notice: This is only the case for event handlers bound via attachEvent . In inline event handlers and the ones assigned to the onclick property, this refers to the element.

• Different properties of the event object (eg no event.stopPropagation ):

   event.stopPropgation(); // W3C // vs. event.cancelBubble = true; // IE 

Except for the capturing, all these things can be dealt with by creating an appropriate wrapper function (what jQuery is basically doing). How such a method could look like can be found in my answer to this question .

You can find more information about these differences on quirksmode.org :

• Advanced event registration models
• Event properties
• Event order
• The this keyword

Answer 2

You can talk about jQuery's normalised event object , and in particular how it simplifies getting the event's target/sourceElement, eliminating the need for code like this:

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

(From http://www.quirksmode.org/js/events_properties.html#target )

Answer 3

Handling AJAX requests, here's a sample function you'd need to get a XML http request object if you were supporting multiple browsers without using jQuery -

 function getXHR () {
 var request = null;
 if (window.XMLHttpRequest) {
  try {
   request = new XMLHttpRequest();
  } catch(e) {
   request = null;
  }
 // Now try the ActiveX (IE) version
 } else if (window.ActiveXObject) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
   // Try the older ActiveX object for older versions of IE
  } catch(e) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    request = null;
   }
  }
 }
 return request;
};  

Answer 4

although all the examples stated above all are good examples but they are not part of everyones daily routine while working with JS.

The biggest advantage that I can see is how simple it is to use the selectors without me worrying about remembering the n of syntaxes and which browsers a particular method works and where not. Yes I am talking about the native dom selectors like

getElementByid(id) => $("#id")

getElementByClass(class) => $(".class")

getElementByTagName("tagname") => $("tagName")

and also the fact that I dont need to worry about how many elements are being returned as part of the result set I can use some other api on the returned object instantly.

Also some of the dom manipulation code is something that irritates the hell out of me using native queries..

especially when i need to add new script tags into the dom you need to set the type etc. before inserting it into the dom with jquery all I need to do is use the html() method. and one more plus of the html() method is it will take care of which code implementation it should use that is whether it is possible to use innherHTML for better performance or if its a readonly control like some of those in IE append it to those etc..

then there are other things like others have noted how easy it is to deal with XHttp requests especially cross domain requests using jsonp with the SAME ORIGIN POLICY that is enforced by browsers..

Event handling being the other tricky thing with so many minor issues that you run into with every control.. just look at jquerys source code once and you will understand what I am talking of.