绑定事件监听函数

gwj41 · 发表于 2013-1-29 09:30:29

最近一直在看《精通javascript》，很赞的书，顺便做一些小笔记。
今天看到了事件绑定方面的内容，分为传统绑定和W3C的DOM绑定

1. 传统绑定如下：
document.getElementById("button").onclick = function(e) {  // your code  alert(this.value); }优点：不同浏览器都可以正常使用；可以使用this关键字，引用当前元素。
缺点：只会在事件冒泡时候运行；一个函数一次只能绑定一个事件处理函数，相同的事件处理函数互相覆盖；事件对象仅对非IE浏览器可用。

2. DOM绑定：W3C
void addEventListener(String type,                   Function listener,                   boolean useCapture); 支持冒泡(false)捕获(true),this引用当前元素，同一个元素可以绑定多个事件，并且不会覆盖先前绑定的事件。
不支持IE。

3. DOM绑定：IE
void attachEvent(String type, Function listener); 同一个元素可以绑定多个事件，并且不会覆盖先前绑定的事件。
仅支持冒泡阶段，this对象指向window对象，而不是当前元素
根据API，可以在IE下获得当前元素，如下：

function init() {var btn = document.getElementById("button1");if (document.all){// IE btn.attachEvent('onclick',function(e) {                               // Event.srcElement : A reference to the Window, Document,                               // or Element object that generated the event.alert(e.srcElement.value);});} else {// 非IEbtn.addEventListener('click',function(e) {//alert(this.value);alert(e.target.value);},false);}}<BODY >  <input name="test1" type="button" id="button1" value="click me" /> </BODY>

		自动登录	找回密码
密码			立即注册