[JS学习笔记]浅谈Javascript事件模型

DOM0级事件模型

element.on[type] = function(){}

兼容性：全部支持

 

lay1

lay2

lay3

• e.target：直接触发事件的元素[IE8及以下不支持taget属性，使用e.srcElement代替]
• e.srcElement：直接触发事件的元素[FF不支持srcElement属性，使用e.target代替]
• e.currentTarget：绑定事件的元素[IE8及以下不支持currentTarget属性，使用this代替]
• this：同e.currentTarget[所有浏览器通用]

DOM2级事件模型

attachEvent

兼容性：IE5-IE10支持，IE11不支持，ff不支持

 

lay1

lay2

lay3

• 对于支持的浏览器
• e.target：不支持该属性
• e.srcElement：直接触发事件的元素
• e.currentTarget：不支持该属性
• this：始终指向window，可以使用call/apply改变this指向
  element.attachEvent("on"+type,function(){ handler.apply(element,arguments); })

DOM2级事件模型

addEventListener

兼容性：IE5-IE8不支持，IE9-IE11支持，ff支持

 

lay1

lay2

lay3

• 对于支持的浏览器
• e.target：直接触发事件的元素
• e.srcElement：不支持该属性
• e.currentTarget：绑定事件的元素
• this：同e.currentTarget

 $(function(){           //dom0级事件绑定
            var eleArr_d1 = $.makeArray($(".demo1").find(".layer1,.layer2,.layer3"));
            $.each(eleArr_d1, function (i, o) {
                o.onclick = fn0;
            });
 
            function fn0(e) {
                e = e || window.event;
                console.log("e.target=", getName(e.target));
                console.log("e.srcElement=", getName(e.srcElement));
                console.log("e.currentTarget=", getName(e.currentTarget));
                console.log("this=", getName(this));
                console.log("========================================================");
            }
 
            //dom2级事件绑定[IE]
            var eleArr_d2 = $.makeArray($(".demo2").find(".layer1,.layer2,.layer3"));
            if (document.attachEvent) {
                $.each(eleArr_d2, function(i, o) {
                    o.attachEvent("onclick", function() { fn2_ie.apply(o,arguments); });//改变this指向
                });
            } else {
                $(".demo2").find(".error").text("当前浏览器不支持attachEvent").show().css({ display: "inline-block" });
            }
 
            function fn2_ie(e) {
                e = e || window.event;
                console.log("e.target=", getName(e.target));
                console.log("e.srcElement=", getName(e.srcElement));
                console.log("e.currentTarget=", getName(e.currentTarget));
                console.log("this=", getName(this));
                console.log("========================================================");
            }
 
            //dom2级事件绑定[FF]
            var eleArr_d3 = $.makeArray($(".demo3").find(".layer1,.layer2,.layer3"));
            if (document.addEventListener) {
                $.each(eleArr_d3, function(i, o) {
                    if (o.addEventListener) o.addEventListener("click", fn3_ff, false);
                });
            } else {
                $(".demo3").find(".error").text("当前浏览器不支持addEventListener").css({display:"inline-block"});
            }
 
            function fn3_ff(e) {
                e = e || window.event;
                console.log("e.target=", getName(e.target));
                console.log("e.srcElement=", getName(e.srcElement));
                console.log("e.currentTarget=", getName(e.currentTarget));
                console.log("this=", getName(this));
                console.log("========================================================");
            }
 
            function getName(ele) {
                if (ele==null) {
                    return ele;
                }else if (ele.className) {
                    return ele.className;
                } else if (ele.tagName) {
                    return ele.tagName;
                }else if (ele.nodeName) {
                    return ele.nodeName;
                } else {
                    return ele;
                }
            }
 
})