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)
接受三个参数:
- type:事件名称,比如"click"、"mouseover"、"ketdown"等
- listener:监听函数,可为匿名函数
- 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);
两个方法接受相同的两个参数:
- type:事件名称,与addEventListener()方法不同的是,事件名称前面需加'on',如"onclick","onmouseover"等
-
listner:监听函数,接受匿名函数,匿名函数不能被移除。
与addEventListener相同,attachEvent同样可以为对象添加多个监听函数,但不同的是,其执行顺序相反,后添加的先触发
还有一点需要注意的是其监听函数的作用域,使用attachEvent添加的方法会在全局作用域中运行,所以this等于window。
oTarget.attachEvent('onclick', function() { alert(this === window); //true })
这种事件处理代码应该放到html代码的后面,才会起作用。