鼠标点击 INPUT 元素后默认触发的事件执行顺序

所有浏览器中，当用户通过鼠标操作触发 click 事件时，事件触发顺序:
1、MouseDown 事件
2、Focus 事件
3、MouseUp 事件
4、Click 事件
可点击测试网页

测试代码如下：

<script>  window.onload = function (){    function stopDefault(e){      e = e || window.event;      (e.preventDefault)      ?e.preventDefault()      :e.returnValue = false;    }    function addEvent(el, type, fn){      (el.addEventListener)      ? el.addEventListener(type, fn, false)      :(function () {        el.attachEvent("on" + type, function(e){          fn.call(el,e);         });      })();    }    function setEvents(elment){      addEvent(elment,"mousedown",function (e){        this.value+=' mousedown 事件被触发';        stopDefault(e);      });      addEvent(elment,"focus",function (e){        this.value+=' focus 事件被触发';      });      addEvent(elment,"mouseup",function (e){        this.value+=' mouseup 事件被触发';      });      addEvent(elment,"click",function (e){        this.value+=' click 事件被触发';      });    }    setEvents(document.getElementsByTagName("input")[2]);  }</script><ol><li>  <h2> 鼠标默认行为触发顺序  </h2>  <input style="width:100%;" onmousedown="this.value+=' mousedown 事件被触发 ';" onfocus="this.value+=' focus 事件被触发 '" onclick="this.value+=' click 事件被触发 '" onmouseup="this.value+=' mouseUp 事件被触发 '">  <p>点击文本域后显示 click 事件相关联的各个事件触发顺序。</p></li><li>  <h2> 使用 return false 语句阻止 MouseDown 后续默认行为触发  </h2>  <input style="width:100%;" onmousedown="this.value+=' mousedown 事件被触发 ';return false;" onfocus="this.value+=' focus 事件被触发 '" onclick="this.value+=' click 事件被触发 '" onmouseup="this.value+=' mouseUp 事件被触发 '">  <p>点击文本域后没有继续执行 focuse 事件内程序，则说明成功阻止了默认行为。</p></li><li>  <h2>使用 preventDefault 方法阻止 MouseDown 后续默认行为触发 </h2>  <input style="width:100%;">  <p>点击文本域后没有继续执行 focuse 事件内程序，则说明成功阻止了默认行为。</p></li></ol>

注意：在 IE 浏览器中，在 MouseDown 事件的处理函数中，取消浏览器默认行为执行后，如果点击的是可获得焦点的元素 (如 INPUT) ，那么他依然会获得焦点并触发 Focus 事件。

而在非 IE 浏览器中，此情况下元素无法获得焦点，也不会触发 Focus 事件。

这篇文章分析的非常到位，IE 浏览器中 MouseDown 事件中取消浏览器默认行为后 Focus 事件依然被触发，值得参考。