事件处理程序DOM0,DOM2,IE的区别总结
2017-02-13 17:36
639 查看
一、事件流
顺序 | 备注 | |
事件冒泡 | 目标对象~document对象 | |
事件捕获 | document对象~目标对象 | 老版本浏览器不支持 |
DOM事件流 | document对象~目标对象~document对象 | IE8-不支持 |
二、事件处理程序
(1)html事件处理程序(略)
(2)DOM0事件处理程序
在元素作用域中运行(this=调用元素)var btn=document.getElementById("mybtn"); btn.onclick=function(){ alert(this.id);//mybtn }
在冒泡阶段被处理
对每个元素值支持一个事件处理程序
删除方式
btn.onclick=null;
(3)DOM2事件处理程序
在元素作用域中运行(this=调用元素)var btn=document.getElementById("mybtn"); btn.addEventListener("click",function(){ alert(this.id);//mybtn },false);
采用DOM事件流,可在捕获阶段和冒泡阶段处理
第三个参数为false,表示在冒泡阶段处理事件;参数为true,表示在捕获阶段处理事件。
默认值为false,最大限度兼容各浏览器。(因为老版本只支持冒泡事件)
对每个元素值支持多个事件处理程序(主要好处),执行顺序为添加顺序;
删除方式(与添加事件的参数完全相同)
方式:removeEventListener()
btn.removeEventListener("click",function(){//无效 alert(this.id);//mybtn },false);
注意:通过addEventListener()添加的匿名函数将无法移除。即上一段代码中的匿名函数移除不了,因为addEventListener()中的匿名函数与removeEventListener()中的匿名函数是完全不同的函数。所以,应将匿名函数表示为一个变量,如下:
var handler=function(){ alert(this.id); } btn.addEventListener("click",handler,false); btn.removeEventListener("click",handler,false);
(4)IE事件处理程序
在全局作用域中运行(this=window)var btn=document.getElementById("mybtn"); btn.attachEvent("onclick",function(){ alert(this===window);//true });
在冒泡阶段处理
第三个参数为false,表示在冒泡阶段处理事件;参数为true,表示在捕获阶段处理事件。
默认值为false,最大限度兼容各浏览器。(因为老版本只支持冒泡事件)
对每个元素支持多个事件处理程序,执行顺序为相反于添加顺序。
删除方式(与添加事件的参数完全相同)
方式:detachEvent()
btn.detachEvent("onclick",function(){//无效 alert(this===window); });
注意:同上;
相关文章推荐
- 【读书笔记】DOM0级 DOM2级 IE三种事件处理程序的区别
- js中ie与标准dom的区别——事件处理
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- DOM0和DOM2事件处理程序对比
- 事件处理程序(HTML,DOM0,DOM2,IE)
- DOM0级和DOM2级事件处理程序的区别? — 第13.2.2节
- DOM事件处理程序总结
- IE事件处理程序与其他浏览器之区别
- 对于原生态的addEventListener与jqueryDOM操作对于事件处理的区别
- javascript事件处理------hml事件处理程序、dom0事件处理程序、dom2事件处理程序
- DOM标准与IE的html事件模型区别
- 关于 input file 事件处理 IE / chrome 下的区别
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- JavaScript 事件处理 IE 和标准 DOM 的差别
- JavaScript DOM 事件处理程序总结
- 跨浏览器的事件处理程序//IE、chrome
- 讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
- DOM的addEventListener事件与IE的attachEvent事件的区别
- DOM标准与IE的html元素事件模型区别
- 好好学一遍JavaScript 笔记(十)――IE跟DOM事件函数区别