Include the jquery custom
focusin and focusout events, there are total 8 events which are trigger by a Single Mouse Click, and they are: mousedown, mouseup, focusin, focusout, focus, blur, change and click. Actually only the first two events, mousedown and mouseup, are directly related to the physical mouse left button press and release, all others are some logical events. As excepted, different browsers has its own implementation, but surprisingly different jquery version handle the events differently, as the result jquery dosen't help you to standardize the event sequences, and make things so unexpected. But after thousands of tests and experiments, I figuer out the evnet sequence should like:1)
mousedown -> 2) change(A Type) -> 3) focusout -> 4&5) blur / focusin -> 6) focus7)
mouseup -> 8&9) change(B Type) / clickThis sequences is generalized for all focusable and editalbe elements, such as a button, input box, radio button, div with tabindex, etc. Lets assume A Type element is something like input box and textarea, and the B Type element is something like check box, radio button and select list. With this knowledge, there are several thing we shoud be care.
- 
  The event sequence would always preserve, which means they are always fire out one by one, even if you had call preventDefaultandstopPropagation. But if you callpreventDefaultduringmousedown, the 2nd to 6th events would not be fired.
- 
  blurandfocusinevent would come out dependent on browser, normally it isblur->focusin, in IE it isfocusin->blur, so you should choose only one of them to use in the whole system, to prevent logic error or dead lock between elements.
- 
  For B Type elements, the changeandclickevent sequece is also dependent on browser, IE8, IE9+, Firefox and Chrome would have totally different strange behaviors. If you use jquery to bind event handlers, the intermediate element's value would be different also. You must bind handler to change event, if you need to trace the element's intermediate value.
 
No comments:
Post a Comment