DOM2下addEventListener与IE下attachEvent的区别
2012-09-29 15:42
344 查看
一、三种事件绑定的介绍
1. DOM0 事件处理程序的传统方式
1.1 绑定方法
将处理函数赋值给元素(包括window和document)的事件处理程序属性
eg.
1.2 作用域
在元素的作用域中运行。即this引用当前元素。
1.3 处理阶段
在bubble阶段运行。
1.4 移除事件处理程序
btn.onclick = null;
1. DOM2 addEventListener
2.1 参数
element.addEventListener(type, handler, phase);
type: 事件类型,如"click", "blur"...
handler: 事件处理程序
phase: true/false, true表示在捕获阶段执行,false表示在冒泡阶段执行
2.2 作用域
在元素的作用域中运行。即this引用当前元素。
2.3 事件处理程序执行顺序
按照绑定顺序触发
首先显示handler1,再显示handler2
2.4 移除事件处理函数
element.removeEventListener(type, handler, phase);
参数必须与addEventListener的参数一样。注意:handler不可以是匿名函数
3. IE下attachEvent
3.1 参数
element.attachEvent(type, handler)
type: "on" + 事件类型,如"onclick", "onblur"
handler: 事件处理函数的引用
3.2 作用域
全局作用域。this指针为window。
3.3 事件处理程序执行顺序
与添加事件处理程序时的顺序相反。
3.4 处理程序执行阶段
冒泡阶段
3.5 移除事件处理程序
element.detachEvent(type, handler);
参数必须与attachEvent的参数一样。注意:handler不可以是匿名函数
二、addEventListener与attachEvent的区别
1. 支持的浏览器
addEventListener在支持DOM2的浏览器中使用,如FF, Chrome等
attachEvent为IE所用
2. 处理程序执行阶段
addEventListener的第三个参数为true时,在捕获阶段执行,为false时,在冒泡阶段执行
attachEvent的均在冒泡阶段执行
3. 作用域
addEventListener的作用域为元素作用域,this为element的引用
addEvent的为全局作用域,this为window的引用
4. 事件处理程序执行顺序
addEventHander:执行顺序与添加顺序一致
attachEvent:执行顺序与添加顺序相反
1. DOM0 事件处理程序的传统方式
1.1 绑定方法
将处理函数赋值给元素(包括window和document)的事件处理程序属性
eg.
var btn = document.getElementById("btn1"); btn.onclick = function() { alert("button clicked"); }
1.2 作用域
在元素的作用域中运行。即this引用当前元素。
1.3 处理阶段
在bubble阶段运行。
1.4 移除事件处理程序
btn.onclick = null;
1. DOM2 addEventListener
2.1 参数
element.addEventListener(type, handler, phase);
type: 事件类型,如"click", "blur"...
handler: 事件处理程序
phase: true/false, true表示在捕获阶段执行,false表示在冒泡阶段执行
2.2 作用域
在元素的作用域中运行。即this引用当前元素。
2.3 事件处理程序执行顺序
按照绑定顺序触发
var btn = document.getElementById("btn1"); btn.addEventListener("clicked", function() { alert("handler1"); }, false); btn.addEventListener("clicked", function() { alert("handler!"); }, false);
首先显示handler1,再显示handler2
2.4 移除事件处理函数
element.removeEventListener(type, handler, phase);
参数必须与addEventListener的参数一样。注意:handler不可以是匿名函数
3. IE下attachEvent
3.1 参数
element.attachEvent(type, handler)
type: "on" + 事件类型,如"onclick", "onblur"
handler: 事件处理函数的引用
3.2 作用域
全局作用域。this指针为window。
3.3 事件处理程序执行顺序
与添加事件处理程序时的顺序相反。
3.4 处理程序执行阶段
冒泡阶段
3.5 移除事件处理程序
element.detachEvent(type, handler);
参数必须与attachEvent的参数一样。注意:handler不可以是匿名函数
二、addEventListener与attachEvent的区别
1. 支持的浏览器
addEventListener在支持DOM2的浏览器中使用,如FF, Chrome等
attachEvent为IE所用
2. 处理程序执行阶段
addEventListener的第三个参数为true时,在捕获阶段执行,为false时,在冒泡阶段执行
attachEvent的均在冒泡阶段执行
3. 作用域
addEventListener的作用域为元素作用域,this为element的引用
addEvent的为全局作用域,this为window的引用
4. 事件处理程序执行顺序
addEventHander:执行顺序与添加顺序一致
attachEvent:执行顺序与添加顺序相反
相关文章推荐
- DOM的addEventListener事件与IE的attachEvent事件的区别
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- event事件中ie和标准dom的区别
- DOM事件的event和IE事件的event的区别
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- ie和火狐事件addEventListener()及attachEvent()区别分析
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- DOM2级事件 addEventListener() 和IE attachEvent()的区别
- JS:attachEvent和addEventListener 使用方法(ff和ie)
- js attachEvent ,addEventListener 和 on 绑定事件的区别
- addEventListener和attachEvent的区别
- window.event对像和在ie与ff中的区别
- Dom对象事件注册和取消(addEventListener/attachEvent)
- IE attachEvent绑定的函数中this引用
- DOM标准与IE的html元素事件模型区别
- JS: addEventListner(attachEvent)和直接在markup中加事件(onclick, etc.)的区别
- Javascript 的addEventListener()及attachEvent()区别分析
- JS在IE和FF下attachEvent,addEventListener学习笔记
- Javascript 的addEventListener()及attachEvent()区别分析