鼠标点击 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 事件依然被触发，值得参考。