DOM中的事件对象
触发DOM某个事件时,浏览器会将一个event对象传入到事件处理程序中,这个对象中包含了所有与事件有关的信息。如下显示事件类型的代码所示:
<body>
<input id="myBtn" type="button" value="Click me">
<script>
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert(event.type); //"click"
}
btn.addEventListener('click',function () {
alert(event.type); //"click"
},false);
</script>
</body>
event对象包含与创建它的特定事件有关的属性和方法。其中我们重点区分event.target,event.currentTarget和事件处理程序中的this。
* 事件处理程序内部,对象this始终等于currentTarget的值,表示当前正在处理事件的那个元素,即事件处理程序所绑定的元素
* target表示事件发生所在的元素,未必是事件处理程序所绑定的元素。
举个例子:
<body>
<input id="myBtn" type="button" value="Click me">
<script>
var btn = document.getElementById('myBtn');
document.body.onclick = function () {
alert(event.currentTarget === this);
alert(this === document.body);
alert(event.target === this);
}
</script>
</body>
如上,如果在页面空白处点击,则三条语句都弹出true;但是如果我们点击的是按钮,则会弹出true,true,false,就是由于事件处理程序绑定在body上,则this与currentTarget都是body的引用,但是事件发生在button上,target是button的引用,由于按钮上并没有注册事件处理程序,结果click事件就冒泡到了body,在那里事件得到了处理。
IE事件处理程序中的this对象与event对象
IE的事件对象
IE的事件对象:与访问DOM的事件对象不同,要访问IE的event对象有几种不同的方法,取决于事件处理程序的方法。
1. 使用DOM0级方法添加事件处理程序
event对象作为window对象的一个属性存在。
var btn = document.getElementById('myBtn');
btn.onclick = function () {
var event = window.event;
alert(event.type) //"click"
}
此处我们需要通过window.event取得event对象,否则event为未定义。
2. attachEvent()方法
使用attachEvent()方法就会有一个event对象作为参数被传入事件处理程序中.
var btn = document.getElementById('myBtn');
btn.attachEvent("onclick",function (event) {
alert(event.type); //"click"
});
IE的事件对象没有target或者currentTarget,而是srcElement。它指向事件目标,与DOM中的target属性相同。
IE的this对象
不同于DOM,在IE的事件处理函数中,this的值并不等于被绑定元素,而是等于window对象。
var btn = document.getElementById('myBtn');
btn.attachEvent("onclick",function (event) {
alert(this === window); //true
alert(this.id); //undefined
});
因此在IE中相比于this,还是使用srcElement比较保险,比较如下代码:
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert(window.event.srcElement === this); //true
}
btn.attachEvent("onclick",function (event) {
event.srcElement === this; //false
});
显然第一个window.event.srcElement和this都是window,但是第二个event.srcElement是btn,this却是window。