And you want to programmatically make that link do its thing. This usually means having the browser navigate to the URL specified link's href attribute (though, it can also mean executing some click handler if one happens to be specified on said link.)

To be honest, I don't think there are a ton of real-world uses for this, but there are a few. And depending on your needs, it may not be trivial to accomplish this in a cross-browser fashion. For example:

The above will do the trick in IE, because IE supports .click() on links. Most other browsers don't though, so that's not an all-encompassing solution.

One (partial) solution in non-IE browsers might be to read the href attribute from a given link and then use Javascript to make the browser navigate to to the URL specified by href that way:

This is not a complete solution for a couple of reasons:

1. Navigating by setting window.location.href blows away the document.referrer property.
2. Any click event handler wired to the link will not execute.

For anyone who has read my post about Re-routing events in Javascript post, you'll know that it is possible to simulate an event though the use of .dispatchEvent(..).

Here's a brief refresher of the part most relevant to this discussion:

This approach will ensure that any click event handlers will fire as desired (though, it's worth nothing that you'd have to handle mousedown, mouseup, keydown, keypress etc... separately,) but it does NOT actuate the link!

This might surprise you. Dispatching a click event to a link doesn't actually cause the browser to navigate to the URL specified by that link's href property. This actually isn't shocking to me, personally. A little surprising, but not shocking.

Anyway, one option is to dispatch the click event and then use window.location.href. This should achieve (some of) the desired effect, but again, the document.referrer will not be preserved if you do this. Also, if the event handler prevents the default action, this method will not honor the code that prevents the default action (i.e. the link will navigate despite the code that attempts to prevent it from doing so.)

You can work around the window.location.href problem by creating a <form> element, settings its action attribute to that of the link's href attribute and then submitting the form through myForm.submit(), but the problem regarding preventing the default action remains.

A 95% Solution

Is there a 100% perfect solution to this problem? Probably, but I'm not 100% perfect. I'm only 95% perfect, so I give you my 95% solution:

To use it:

This code is self explanatory, right?

If .click() is available, let's use that. If not, let's try to do a W3C-style create and dispatch event. Then, in order to maintain the document.referrer property, we'll use a form submission, but we only want to submit that form if the event handler (if there is one) for the click event doesn't explicitly prevent the default action.

This isn't a 100% perfect solution because, actuating a link in this manner is only going to invoke click handlers and navigate to the URL of the link's href attribute (if appropriate to do so.) It isn't going to invoke handlers for any other types of events. And I'm not about to create and dispatch every possible kind of event. Besides, I think we can all agree that click is by far the most common scenario.

So there ya go. Programmatically clicking (or more accurately, actuating) a link with Javascript. Enjoy!

(Tested: Firefox 3.5.7, IE8, Opera 10.01, Safari/Win 4.0.3, Chrome 3)

It's still very much in development and the source is a bit sloppy, but it currently weighs in at only 2.5k compressed and gzipped and (in Firefox3) either outperforms or is on par with all other major Javascript libraries out there*.

It's definitely not ready for production use, but when it is, it will become the new CSS querying engine for Gimme and will also be available as a stand-alone library, which will be extensible (so you can add your own rules) and which will also be guaranteed to play nicely with other libraries by not adding to the prototype of any native objects and only introducing one single global variable (fetch).

For anyone interested, the current (i.e. sloppy) source is available on CodePlex: fetch.js.

As I said, it's not ready for prime time and the code is sloppy (and probably buggy). Consider yourself warned.

* Fetch was not compared with libraries that use XPath or querySelectorAll, because it uses neither, but rather is a pure Javascript implementation. Upon release, it will take advantage of querySelectorAll where appropriate, but will not use XPath.

But I'm a loud-mouth and I have lots to say. So rather than clutter up this blog with "too much" incoherent babble, I decided to start another.

My new blog is called Stchur on Whatever (http://whatever.stchur.com) and on it, I'll write about whatever the heck I feel like.

So please check it out.

Won't be long now IE6...

1. Fixing IE's attachEvent Failures
2. mouseenter and mouseleave Events for Firefox (and other Non-IE Browsers)

As time has gone on, I've seen mention of these articles pop up in programming forums here and there, and they still receive comments from time to time, which lets me know that people are still getting something out of them.

Unfortunately, the code in them is a tad dated. I've learned more and improved my code since I originally wrote them, and while these improvements have made their way into my Javascript Library, I know that the majority of people are just grabbing the code directly from the blog entries.

So I've decided to post an update: a sort of fusion between these two blog entries which offers functionality for addressing all of the issues discussed in the aforementioned entries (and then some).

I consider this new function the "Ultimate addEvent Function" because I really believe it addresses the large majority of cross-browser issues that people face when dealing with events in Javascript. And furthermore, this function goes beyond anything that any other Javascript library provides (at least as far as I know).

So without further ado, I offer to you:

sstchur's Ultimate addEvent(..) function!

var xb = {};
(function()
{
   var GUIDCounter = 0;
   var evtHash = {};
   var pseudoEvents =
   {
      'mouseenter': function(_fn, _useCapture, _listening)
      {
         var f = mouseEnter(_fn);
         _listening ?
            xb.addEvent(this, 'mouseover', f, _useCapture, false) :
            xb.removeEvent(this, 'mouseover', f, _useCapture, false);
         f = null;      
      },
      
      'mouseleave': function(_fn, _useCapture, _listening)
      {
         var f = mouseEnter(_fn);
         _listening ?
            xb.addEvent(this, 'mouseout', f, _useCapture, false) :
            xb.removeEvent(this, 'mouseout', f, _useCapture, false);
         f = null;      
      }
   };
   
   xb.Helper =
   {
      getObjectGUID: getObjectGUID,
      storeHandler: storeHandler,
      retrieveHandler: retrieveHandler,
      isAnAncestorOf: isAnAncestorOf,
      mouseEnter: mouseEnter
   }; 
   
   xb.addEvent = function()
   {
      if (typeof document.addEventListener !== 'undefined')
      {
         return w3c_addEvent;
      }
      else if (typeof document.attachEvent !== 'undefined')
      {
         return ie_addEvent;
      }
      else
      {
         // no modern event support I guess
         // (you could use DOM 0 here if you really wanted to)
         return function() {};
      }
      
      function w3c_addEvent(_elem, _evtName, _fn, _useCapture, _directCall)
      {
         var eventFn = pseudoEvents[_evtName];
                  
         if (typeof eventFn === 'function' && _directCall !== false)
         {
            eventFn.call(_elem, _fn, _useCapture, true);
         }
         else
         {
            _elem.addEventListener(_evtName, _fn, _useCapture);
         }
      }
      
      function ie_addEvent(_elem, _evtName, _fn, _useCapture, _directCall)
      {
         var eventFn = pseudoEvents[_evtName];
               
         if (typeof eventFn === 'function' && _directCall !== false)
         {
            eventFn.call(_elem, _fn, _useCapture, true);
         }
         else
         {
            // create a key to identify this element/event/function combination
            var key = generateHandlerKey(_elem, _evtName, _fn);
            
            // if this element/event/combo has already been wired up, just return
            var f = evtHash[key];
            if (typeof f !== 'undefined')
            {
               return;
            }
            
            // create a helper function to fix IE's lack of standards support
            f = function(e)
            {
               // map .target to .srcElement
               e.target = e.srcElement;
               
               // map .relatedTarget to either .toElement or .fromElement
               if (_evtName == 'mouseover') { e.relatedTarget = e.fromElement; }
               else if (_evtName == 'mouseout') { e.relatedTarget = e.toElement; }
                  
               e.preventDefault = function() { e.returnValue = false; };
               e.stopPropagation = function() { e.cancelBubble = true; };

               // call the actual function, using entity (the element) as the 'this' object
               _fn.call(_elem, e);
               
               // null out these properties to prevent memory leaks
               e.target = null;
               e.relatedTarget = null;
               e.preventDefault = null;
               e.stopPropagation = null;
               e = null;
            };
            
            // add the helper function to the event hash
            evtHash[key] = f;

            // hook up the event (IE style)
            _elem.attachEvent('on' + _evtName, f);
            
            key = null;
            f = null;
         }
      }
   }();

   xb.defineEvent = function(_evtName, _logicFn)
   {
      pseudoEvents[_evtName] = _logicFn;
   };

   
   // Helper Functions
   function storeHandler(_key, _handler)
   {
      evtHash[_key] = _handler;
   }
   
   function retrieveHandler(_key)
   {
      return evtHash[_key];
   }
   
   function generateHandlerKey(_elem, _evtName, _handler)
   {
      return '{' + getObjectGUID(_elem) + '/' + _evtName + '/' + getObjectGUID(_handler) + '}'; 
   }
   
   function isAnAncestorOf(_ancestor, _descendant, _generation)
   {
      if (_ancestor === _descendant) { return false; }
      
      var gen = 0;
      while (_descendant && _descendant != _ancestor)
      {
         gen++;
         _descendant = _descendant.parentNode;
      }
      
      _generation = _generation || gen;
      return _descendant === _ancestor && _generation === gen;    
   }
   
   function mouseEnter(_fn)
   { 
      var key = xb.Helper.getObjectGUID(_fn);
      var f = evtHash[key];
      if (typeof f === 'undefined')
      {
         f = evtHash[key] = function(_evt)
         {
            var relTarget = _evt.relatedTarget;
            if (this === relTarget || isAnAncestorOf(this, relTarget)) { return; }
      
            _fn.call(this, _evt);
         };
      }
      return f;   
   }
   
   function getObjectGUID(_elem)
   {
      if (_elem === window)
      {
         return 'theWindow';
      }
      else if (_elem === document)
      {
         return 'theDocument';
      }
      else if (typeof _elem.uniqueID !== 'undefined')
      {
         return _elem.uniqueID;
      }

      var ex = '__$$GUID$$__';
      if (typeof _elem[ex] === 'undefined')
      {
         _elem[ex] = ex + GUIDCounter++;
      }
      return _elem[ex];
   }

})();
 

Commentary

So some of you may be wondering: "Why another addEvent function. Haven't we been through this?" We have, but I think you'll find that this version does more than any other addEvent function you've seen. For example:

• Works in all browsers that matter
• Ensures one event wire up for any given element/event/handler combination (this is mostly for IE)
• Forces IE to honor the this keyword from within event handler functions
• Normalizes the wire up mechanism in all browsers (no need to include the "on" prefix for IE)
• Forces IE to recognize the following properties/methods on event objects: .stopPropagation(), .preventDefault(), .target, .relatedTarget
• Enhances Non-IE browsers to support mouseenter and mouseleave events
• Provides an extension mechanism so developers can write their own custom events that plug right in ('mousewheel' or 'DOMContentReady' for example)

Given all that the Ultimate addEvent function does, it's not surprising that it has a bit of length to it. But it isn't super long, and I think it's well worth it.

Usage

Using the function(s) is just as easy as you'd expect:

Extending Functionality

Since I mentioned that it was possible to extend the Ultimate addEvent function with custom events that plug right in, I figure I'd better offer an example. Actually, there already is an example built right into it. Both the mouseenter and mouseleave events utilize the extension mechanism internally, but for demonstration purposes, let's go ahead and add a mousewheel event: