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

Event for select-dropdown menu closing

Is there an javascript event for the closing of an expanded dropdown (select-element)?
The blur event does only fire when the element loses its focus, but that seems to be independently of the dropdown.
The change event does only fire when the client selects an options instead of clicking somewhere else.

Try with "change" event. It will be fired when you select value from list.

javascript document onmousedown cancels element onclick

I have document.addEventListener('mousedown', ...) performing some visual feedback to the user. But I also have dynamicaly created elements with elem.addEventListener('click') which are not fired. If I remove document mousedown listener then clicks on elements are triggered (or if I change document's mousedown to click event). Why is that and how to solve this? I would realy need document to handle mousedown and still be able for elements to recieve their click/tap events.
FIDDLE: http://codepen.io/hpet/pen/izpJK
if you uncomment document mousedown event, element receives click ok, otherwise click on element is never triggered.
Fiddle updated. Uncomment lines 22/23 (setting position) will not fire click event.

The root cause of your problem is overlapping elements.
Since you're moving the circle element on top of the square element in your mousedown handler, the subsequent mouseup event will be triggered on the circle. Since that event was not triggered on the square element, no click event will be generated.
If you have to keep the circle element on top of the square, you can use the pointer-events CSS rule to force mouse events to "go through" the circle element.

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.

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', ...)?