Perhaps you think of onfocus and onblur events as a default behavior existing in any web page. This is not quite true! Onfocurs and onblur are well known in web developing (js) and are fired, of course, when the user tries to point something or leaves some element. Onfocurs is fired when the user either goes to an element with the Tab button on with the mouse. When the element is on focus, evidently, the onfocus event is fired. Actually you can see which element is on focus, like an anchor or input, when the element is outlined by the browser by default. In the same scenario, when some element has been on focus and than the user switches to another element, the onblur event is fired. Thus you may guess that this element is no longer on focus.

This in general are the onfocus/onblur events. The interesting part is that by default are known as built-in events in every page, but that is wrong.

Where Are My Events?

A typical use case is to take the code from some web page, where you’re sure this works perfectly, you can focus and blur element with no obstacle, but once you paste it inside your markup everything’s going wrong. Imagine you’ve the following markup (a typical search box text):

This works perfectly until you paste it to your site. And than nothing works correctly. Why? Where’s the problem?

Make Them Work

Actually the problem isn’t hiding somewhere in the markup above. It’s in the HTML definition. There are lots of web pages using strict HTML definition, that looks like this:

	...


	...

while you’ve to use the pure HTML definition to make onfocus/onblur work.

You’ve to switch to:

	...


	...

Than you can continue using these useful events!

I’m sure you know how to prevent the default action of a link when onclick event is attached to it. Yes, it is a common task and by simply adding a return false; at the end of the method called on click it simply doesn’t call the refresh the page. This is really an everyday task. To describe it first, let’s imagine there’s a link with # href value:

<a onclick="”myFunc()”" href="”#”">click here</a>

Than the definition of myFunc() is something like that:

function myFunc() {
   ...
   return false;
}

If that “return false” part was missing you simply get additional # in the uri of the page and worse – you may be scrolled to the top of the page, because of the lack of an anchor with empty name.

OK, but we know how to deal it! But what happens when you don’t attach click event but mousedown/mouseup pair? It may seem the same thing but it is not!

When you place return false on both event handlers of the mousedown/up events nothing happens, there is a # on the end of the uri and yes the document is scrolled.

How the prevent the default action?

Simply by adding onclick event! We already know that this is working and prevents the default action. Just do the following:

$(‘#element_id’).mousedown(function(){
    ...
    return false;
});
$(#element_id’).mouseup(function() {
   ...
   return false;
});

// this doesn’t work like preventing the default refresh
// action until ....
$(‘#element_id’).click(function() {
   return false;
});
// is added