# Browser event 关于浏览器事件

browser event

可以触发各事件的相应元素

1. focus/blur | focusin/focusout

   • the window. The focus is gained when the user brings the window forward, and lost when the user sends it back.
   • Links, whether the user uses a keyboard or a mouse.
   • Form fields, whether the user uses a keyboard or a mouse.
   • Elements with tabindex, whether the user uses a keyboard or a mouse.

2. change

   • change on text inputs
     Fires when the user blurs the input AND the text has been changed since the last focus.
   • change on select boxes
     Fires when the user activates a new option (either by a mouse click or by a keyboard activation).
   • change on checkboxes and radios
     Fires when the user changes the element’s state (checked or not).
     bug：ie5-8 只有当blur的时候才触发；
     from
3. select
   when the user selects text in a text input
   
   • On text inputs
   • form/document/window(ie<=8 not supported)
4. keydown, keypress, keyup
   keydown
   Fires when the user depresses a key. It repeats while the user keeps the key depressed.
   keypress
   Fires when an actual character is being inserted in, for instance, a text input. It repeats while the user keeps the key depressed.
   keyup
   Fires when the user releases a key, after the default action of that key has been performed.
   
   • On focusable elements(输入理论上只对input有意义，但对其他的focus的元素也会触发)
   • form/documen/window(window ie<=8 not supported)
5. mouseover/mouseout
   
   • On any element(mouseover ie6有点小问题）
   • document/window(window ie<=8 not supported)

6. mouseenter/mouseleave

   • only ie/opera支持，不冒泡。
   • 触发顺序
     mouseover=>mouseenter=>mouseout=>mouseleave

7. submit/reset

   • form
   • window/document(ie<=8 not supported)
8. error
   
   • when the browser encounters a JavaScript error:
     With traditional registration the browser fires an event with type undefined from the test link. (Except Safari, which fires it from an undefined node.)
     With the other event registrations the browser fires an error event from the window.
   • when Image source wrong fire from the node
   • When a script file does not exist the error event should fire from the
9. load/unload
   
   • Page 支持load/unload
   • img 支持load
   • css,script,iframe 部分浏览器支持load
10. resize
    
    • only On the window
11. scroll
    
    • window
    • document(ie<=8 not supported)
    • On any element with overflow: auto

不冒泡的事件

1. focus/blur事件不冒泡，但focusin and focusout Fire at the same time as focus and blur会冒泡。
   from

2. mouseenter/mouseleave(only ie/opera 支持)不冒泡，在mouseover/mouseout时触发会冒泡

3. submit/reset事件
   功能：监听表单的提交/重置
   在IE6到IE8下只会冒泡到当前提交表单所在的form标签中，也就说document下直接代理监听多个表单提交会有兼容性问题。

4. change事件
   功能：监听元素value值的改变，input和select 在blur才触发
   change事件在IE6到IE8，chrome，safari下都不会冒泡，也不能像focus和blur一样可以用focusin和focusout替代，在IE下也不能通过设置captrue实现对事件的捕获，其他高级浏览器下可以。
5. select事件
   功能：监听文本域中文字的选中。
   select事件在IE6到IE8，chrome，safari下都不会冒泡，但是比change好的一点是，在IE下可以使用selectstart替代，而在高级浏览器中可以直接设置captrue为捕获即可。

default action

1. alink click
   缺省触发页面跳转

2. input:submit/input:image/button:submit click
   submit按钮点击触发页面提交动作。

3. 回车 表单提交
   回车键触发表单提交动作。

4. a right-button mouse click
   默认动作是显示右键菜单，触发事件是contextmenu，在contextmenu的handle中阻止缺省动作即可阻止显示右键菜单。

4.touch(tap) ->click
touchstart =>(touchmove)=>touchend=>(mouseenter)mouseover=>mousemove=>mousedown=>mouseup=>click(300ms delay)

Android 4 always fires mouseover and mousemove, since they occur
before touchstart.(我测试结果不是所有的机器，uc9是这样，但是note3自带浏览器和chrome不是这样）

mouseover=>mousemove=>touchstart =>(touchmove)=>touchend=>mousedown=>mouseup=>click(300ms delay)

js无法通过event触发的动作

1. ie6/FF：js不能给alink trigger click事件导致alink跳转,只能通过alink.click()来触发。（chrome可以）
2. ie/FF：js不能给submit按钮trigger click事件导致表单提交，只能通过form.submit()来触发。（chrome可以）
3. js 不能trigger click on input,to make it focus，只能通过input.focus()来触发。（都不可以）
4. ie6/FF：不能trigger 对应的label的click达到触发input focus的目的。（chrome可以）
5. 不能trigger click on select，make select展开,
6. 不能trigger click on radio(ie>=9 居然支持）
7. 不能trigger click on checkbox(ie>=9 居然支持）
8. ie>=9/chrome 能trigger 对应的label的click达到触发select/radio/checkbox focus.

suggest

1. no mouseover|mouseout,but Jquery(mouseenter|mouseleave)
2. suggest droplist 监听什么事件
   keydown && keyup && paste
   or
   input(ie<=8 not supported) && propertychange(for ie<=8)
   ie9 剪切和删除的时候不起作用 ,ie9 bind propertychange use attachEvent not addEventListener

further read

1. Events in JavaScript
2. ppk event sumup