Develop Reference

Why does Sagepay interferes with .valid()?

the problem that I'm facing is:
I do validations on the client side using validate() (https://jqueryvalidation.org).
On the blur event I call ($this).valid(); for each field in my form.
Before loading sagepay.js (https://pi-test.sagepay.com/api/v1/js/) the validation works as intended.
If I load sagepay.js (it does not matter when) ($this).valid() always returns true.
I tried changing the event but sagepay overrides all these events: blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu
My question is : What can i do to keep validating using ($this).valid() or why does sagepay override valid()?

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.

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

What events can I attach to jQuery's on() function?

Besides click, mouseover, and mouseleave, are there any other events for jQuery's on() function or are those the main uses for on()? I can't find any documentation on it.

You can use built-in DOM events or you can create your own events. Here's a list of some of the built-in DOM events (all events don't occur on all types of objects):
click
dblclick
mousedown
mouseup
mouseover
mousemove
mouseout
keydown
keyup
keypress
load
unload
abort
error
resize
scroll
select
change
submit
reset
focus
blur
focusin
focusout
touchstart
touchend
touchmove
touchenter
touchleave
touchcancel
cut
copy
paste
beforecut
beforecopy
beforepaste
contextmenu
drag
dragstart
dragenter
dragover
dragleave
dragend
drop
selectstart
beforeunload
readystatechange
beforeprint
afterprint
See http://en.wikipedia.org/wiki/DOM_events for a decent description of most of these.

on() can be used for anything. It is just a way to delegate events to a specific DOM element.
Check out: http://api.jquery.com/on/
It will tell you how to "convert" bind, live, delegate functions into the new "on" method.

In addition to Parris anwser you can do
$("#whatever").on("my.awesome_event", function(event, one, two, three){
// stuff ...
});
$("#whatever").trigger("my.awesome_event", [1,2,3]);
In this example variables one, two, three will have values 1, 2, 3.

You could use any built in events (change, focus, mousedown, blur, touchstart, etc...) or you can make your own events and bind them even!

I use jQuery's on for both built-in DOM events such as change, click, blur, etc. and my own custom events within classes. For most classes I want custom events for, I will do this:
this.events = $({});
I can then bind custom events like this:
foo.events.on("myCustomEvent", function(e) {
// Do something
});
And I can trigger like this:
this.events.triggerHandler("myCustomEvent");