同一事件绑定不同的处理方法、执行顺序有所不同

在做项目的过程中遇到一个很棘手的问题，示例如下：

动态加载DOM节点的时候，
var a2 = document.createElement("a");

    a2.className = "countCicle";
    a2.onclick = function(){
    alert("进入js的click事件");
}

DOM节点加载完毕后，对同一元素再绑定不同的处理方法，

$(".countCicle"),"click",function(){
      alert("进入jquery的click事件");
 });

直接在电脑上测试的时候，两个click方法都会执行，但是到了mobile上，事实并非如此，而是动态绑定的click执行了，后者确未执行。查了N多资料，当发现解决方法的那一刻，异常兴奋，so ga~~~  原来是绑定事件的执行顺序出现了问题，而且IE6、7、8的执行顺序还不一致！！！

解决方法1：

jQuery的$.bind(type, data, fn)方法则没有这个问题，因为jQuery对事件机制做了处理，少废话，上代码，

    
if (elem.addEventListener)
　　　　elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
　　　　elem.attachEvent("on" + type, handle);

这样方法绑定的事件，但是在此之前会判断该jquery对象上面是否已经同一个类型的handlers，如果有则不会重复绑定而是把该对象的handle合并到handlers中成为一个方法相当于这样function c(){a();b();}，按照顺序的压入方法，这样解决绑定多个方法时出现执行顺序混乱的问题。瞬间有没有感觉Jquery高大上？

解决方法2：

直接调用addEvent(el,type,fn)方法绑定事件，

var addEvent = (function() {
    if (document.addEventListener) {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.addEventListener(type, fn, false);
            }
        };
    } else {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.attachEvent('on' + type,
                function() {
                    return fn.call(el, window.event);
                });
            }
        };
    }
})();