javascript事件学习（1）

  事件是一种异步的编程实现方式，本质是各个组成部分之间传递特定消息。

　1、EventTarget接口

---

 

　　DOM的事件操作（监听和触发），都定义在EventTarget接口。ie8+浏览器下有三个方法，addEventListener（绑定监听函数）、removeEventListener（移除监听函数）和dispatchEvent（触发事件）。

　　1.1  addEventListener方法

　　

function test() {
   console.log('添加事件');     
}

var oTarget = document.getElementById('dd');
oTarget.addEventListener('click', test, false);

给指定的对象（dd）的特定事件（click）添加了监听函数test().

其语法结构为：

Target.addEventListener(type, listner, useCapture)

接受三个参数：

1. type:事件名称，比如"click"、"mouseover"、"ketdown"等
2. listener:监听函数，可为匿名函数
3. useCapture:监听函数是否在事件捕获阶段触发，默认为false

另外，可以用addEventListener方法为对象添加多个监听函数(同一事件或不同事件)，先添加先触发，重复添加同一函数只会执行一次。

function test() {
   console.log('添加事件');     
}

var oTarget = document.getElementById('dd');
oTarget.addEventListener('click', test, false);
oTarget.addEventListener('click', function() {console.log('再添加一个')}, false);

oTarget.addEventListener('mouseover', function() {console.log('鼠标经过')}, false);

　　1.2 removeEventListener方法

oTarget.addEventListener('click', test, false);
oTargetremoveEventListener('click', test, false);

用来移除addEventListener方法添加的事件监听函数，语法和addEventListener相同，参数需与前者一一对应。这也意味着匿名监听函数将不能被移除

　　1.3 dispatchEvent方法

oTarget.addEventListener('click', test, false);
var event = new Event('click');
oTarget.dispatchEvent(event);

dispatchEvent方法在当前节点触发指定事件，从而触发监听函数的执行。语法为：

Target.dispatchEvent(event)

其参数是Event对象的一个实例，如果为空或者不是一个有效的事件对象，将报错。

---

 

同时在ie浏览器下，实现了两个类似的方法，attachEvent()和detachEvent()。

function test() {
    console.log('点击成功');
}
var oTarget = document.getElementById('dd');
oTarget.attachEvent('onclick', test);
oTatget.detachEvent('onclick', test);

两个方法接受相同的两个参数：

1. type:事件名称，与addEventListener()方法不同的是，事件名称前面需加'on'，如"onclick","onmouseover"等

2. listner:监听函数，接受匿名函数，匿名函数不能被移除。

与addEventListener相同，attachEvent同样可以为对象添加多个监听函数，但不同的是，其执行顺序相反，后添加的先触发

还有一点需要注意的是其监听函数的作用域，使用attachEvent添加的方法会在全局作用域中运行，所以this等于window。

oTarget.attachEvent('onclick', function() {
    alert(this === window);  //true
})

 

这种事件处理代码应该放到html代码的后面，才会起作用。