[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;
}
}

})