JS中dom0级事件dom0级dom0和dom22级的区别事件的区别介绍

来源：蜘蛛抓取(WebSpider) 时间：2017-06-03 08:58 标签： dom0和dom2
一、事件流
目标对象~document对象
document对象~目标对象
老版本浏览器不支持
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
采用DOM事件流，可在捕获阶段和冒泡阶段处理
第三个参数为false，表示在冒泡阶段处理事件；参数为true，表示在捕获阶段处理事件。
默认值为false，最大限度兼容各浏览器。（因为老版本只支持冒泡事件）
对每个元素值支持多个事件处理程序（主要好处），执行顺序为添加顺序；
删除方式（与添加事件的参数完全相同）
方式：removeEventListener()
btn.removeEventListener("click",function(){//无效
　　alert(this.id);//mybtn
注意：通过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);});
注意：同上；
阅读(...) 评论()javascript（47）
javascript高级程序设计解读（30）
js事件（16）
一：什么是DOM0级事件处理程序？
DOM0级方法指定的事件处理程序被认为是元素的方法，就是将一个函数赋值给一个事件处理程序属性（每个元素包括window和document都有自己处理程序的属性）。例如：onclick、onmouseover、onmouseout等。因此，这时候的事件处理程序是在元素的作用域中执行的；例如DOM0级绑定事件的方法：
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&Document&
id="div1"&点我&
type="text/javascript"&
var btn = document.getElementById('div1');
btn.onclick = function(event){
console.log(event);
console.log(this.id);
console.log(this.innerHTML);
删除事件的方法是：
btn.onclick =
二：什么是DOM2级事件处理程序？
’DOM2级事件’定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener();所有的DOM节点都包含这两种方法。
它们都接受3个参数：要处理的事件名，事件处理程序的函数，和一个布尔值。 最后一个参数：如果为true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序。例如：
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&Document&
id="div2"&你可以改变世界！&
type="text/javascript"&
var btn2 = document.getElementById('div2');
btn2.addEventListener('click', function(e){
console.log(e);
console.log(this);
console.log(this.innerHTML);
}, false);
然后我们再给btn2添加一个事件：
btn2.addEventListener('click', function(e){
console.log(this.id)
}, false);
最后我们会看到，当点击div的时候，这两个事件都会发生，这就是DOM2级事件处理程序比DOM0级好的地方(DOM0级只能覆盖，不会连续触发！)。
我们通过addEventListener()添加事件处理程序的程序只能使用removeEventListener()来移除。，这也意味着，通过addEventListener()添加的匿名函数无法移除：
接着以上的代码：
btn2.removeEventListener('click',function(e){
console.log(this.id);
所以，我们必须使用这样的写法：
function handler(){
console.log('这次可以移除了！');
btn2.addEventListener('click',handler, false);
btn2.removeEventListener('click',handler,false);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：27479次
排名：千里之外
原创：62篇
转载：13篇
(1)(5)(1)(1)(2)(7)(13)(11)(32)

我要回帖

更多关于 dom0和dom2 的文章

 

随机推荐