JavaScript事件对象

来源：互联网发布：icmp报文端口编辑：程序博客网时间：2024/05/19 19:59

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。

阅读全文

0 0