JavaScript中click和keypress事件绑定的顺序

1. click事件的覆盖

当在同一个元素上绑定两个click事件时，后一个会覆盖前一个。

例如：

 

1. div.onclick=function(){

2. console.log('click1');

3. };

4. div.onclick=function(){

5. console.log('click2');

6. }

此时，单击div，输出click2.

 

2. click事件的分解

click=mousedown+focus+mouseup;

例如：

 

<input type='text' id='input'>

1. var input=document.getElementById('input');

2. input.onclick=function(){

3. console.log('click');

4. }

5. input.onmousedown=function(){

6. console.log('mousedown');

7. }

8. input.onfocus=function(){

9. console.log('focus');

10. }

11. input.onmouseup=function(){

12. console.log('mouseup');

13. }

此时，单击input标签，将依次输出mousedown, focus, mouseup, click。

3. keypress事件分解

 

1. input.onkeypress=function(){

2. console.log('keypress');

3. }

4. input.onkeydown=function(){

5. console.log('keydown');

6. }

7. input.onkeyup=function(){

8. console.log('keyup');

9. }

此时，按下key键，依次输出keydown, keypress, keyup。