Develop Reference

What are all the events associated with a human mouse click?

When a user clicks on a HTML element, it seems a number of JavaScript events other than just "click" are fired. For example, clicking on a input/text element also triggers events like focus, mousedown, mouseup, etc...
Essentially, when a human clicks on an element, what are all the events that get fired? (besides click!)

For the specific button click, there will be:
mousedown
mouseup
click
If the mouse entered a new element in the period you are looking you may also see:
mousemove
mouseover
mouseenter
mouseleave (on other element)
mouseout (on other element)
If the focus changes based on the click:
focusout (on some other element)
blur (on some other element)
focusin
focus
You can see an exact sequence of events in this jsFiddle that logs all the events: https://jsfiddle.net/jfriend00/r9c7n5j2/
If the focus is elsewhere and you click into an input tag, you will see this sequence of events (for clarity, only one mousemove event is shown, but there will likely be many):
mouseover
mouseenter
mousemove
mousedown
focus
focusin
mouseup
click
Note: focusin is not yet supported in Firefox.

Check out this bit in the w3:
Should be what you're looking for. Also MDN has a good overview of them

onblur vs onclick timing

There is a textarea element which converts itself into a div when onblur event happens on that same textarea. There is also a button which has its onclick property set to function f.
If one is writing in the textarea and then clicks on a button, f is fired, but also onblur event handler is triggered. Is there some order rules in this case, or the two handler functions may fire in random order?

I created a jsfiddle here: http://jsfiddle.net/z5SEp/
The events for latest Chrome seem to be:
mousedown
blur
mouseup
click
Although I could not find any documentation to rely on, it would make sense to me that blur is fired after mousedown, but before mouseup. Mousedown causes blur, but you could leave your mouse button down for an extended period of time and still cause a blur.
The order of click events will always be 1. mousedown 2. mouseup 3. click. The blur makes sense to be after mousedown but before mouseup.
More things to keep in mind
If you trigger the button click like this: $('button').trigger('click');, then the blur event will not fire, and focus will remain on the textarea.

In this scenario, the blur will always fire first because blur is triggered as soon as the mouse button goes down elsewhere on the page. So when the mouse goes down on your button, the textarea's blur event is fired first. As the mouse comes up, the button's click event is fired.

Preventing Focus event on Clicks

I have a web page with a bunch of div elements in it. This page runs on a TV which is connected to a very slow settop box. The box runs the embbeded Opera browser version 9.50. The only input device I have is the STB's Remote Control, No mouse! In this web page (on TV) the user navigates around using the arrow up/down/left/right keys on the remote to go from one div to another since there's no mouse. Now, I'm trying to "debounce" theses keypresses when someone is pressing them too quickly! I can control the keypress events but I'm not having any luck with preventing the focus events, it seems like they're fired regardless what I do in the keypress handler anyway.
The question is: how can I prevent focus from going to another element inside the keypress handler of the current element? Calling keypress event.preventDefault() and returning false (from the keypress handler) does not prevent the focus from shifting to the next element. In other words the event "bubbles up" anyway. How can I prevent that?
I've played around with changing the tabIndex property too but it's no use.
Any ideas. Thanks.

If you want to prevent focus from a click event, you have to e.preventDefault() from the mousedown handler. Can't do it from the click handler since that is not a physical event, it's just an abstraction of mousedown and mouseup
If you want to prevent tab from changing focus, you have to e.preventDefault() from the keydown handler. Can't do it from keypress, because keypress is not a physical event, it's an abstraction of keydown and keyup events (notice that keypress fires multiple times when you hold down the key).
http://jsfiddle.net/gtwhF/
$('#a').on('mousedown', function(e) {
e.preventDefault();
})
$('#a').on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
})

Determining whether focus was received as result of a click event

I have an <input> element that can either have the focus set via code, or as the result of a mouse click.
If the user clicks on the input, then the click event handler will fire - all well and good. If the element receives the focus via some other way (e.g. via code) then I want to manually trigger the click event so that the handler will also fire.
I could do this:
$elem = $('input');
$elem
.on('focus', function() { $(this).trigger('click') })
.on('click', function() { alert('Clicked!') });
However, this will result in click handler being fired twice; once for the click event and once for the focus event.
Is there any way to selectively trigger the click handler only if the focus was not received as the result of a click event?
UPDATE
This is a very simplified version of my problem, so I can't do things like bind both handlers to the focus event etc. I'm trying to merge two third-party pieces of code.

The .trigger() function adds a property isTrigger in the event object to identify that the event was triggered by its usage. Although, it is not documented the property is still present in jQuery 1.8.3 but it seems to only be used internally.
Anyways, you can make use of the extraParameters parameter to add a custom property to the event object. For instance,
$(this).trigger('click', {
isTrigger: true
});
It will keep the compatibility with isTrigger even if it is gone in a future release.

After doing some more research it appears that there is no way of guaranteeing which event will fire first: click or focus. (There doesn't seem to be a standard that dictates the order of events.)
This means that when the focus event fires there's no way to determine if a click event will or will not be triggered by the browser shortly afterwards.
I managed to solve the issue by using setTimeout() to run a test about 100ms after the focus event fired to check if the click event had fired. The third-party code that I was using (bound to the click event) added an extra class to the <input>, so I was able to check for that.

You can tap into the mousedown event which fires before the focus event. When you click a focusable object the order of events is as follows... mousedown, focus, mouseup, click.
You could set a flag in the mousedown event and then check for it in the focus event to see if the focus came from a mouse click. Obviously make sure to clear the flag in the focus event handler. Every application is different, but tapping into the mousedown event allows you to figure out a solution.
Here is a JSFiddle demonstrating the order of events... http://jsfiddle.net/ek7v7/

$elem = $('input');
$elem
.on('focus', function() { alert("Focused!") })
Focus can be fired by focusing the input by using tab, clicking it, or by using .focus()
Is there a reason for on('click', ...)?

jQuery stop element from receiving an event

I have a checkbox on my page. How do I stop it from receiving any event (e.g. touchstart) using jQuery ?
I mean nothing should happen when that checkbox is clicked.

To disable all JavaScript - Handlers on the element:
$('#checkbox').unbind();
And to prevent the standard-function of the checkbox, you could disable it
$('#checkbox').attr('disabled', true);
or directly in the Markup:
<input type="checkbox" disabled="disabled" />

See this: jQuery unbind()
$('#thecheckbox').unbind('click'); // removes all 'click' event handlers from the element

Use this, but you have to specify the events one by one:
$('.selectorToCheckbox').bind('click mouseover', function (e) {
e.preventDefault();
});
The available events are: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.