JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节

最新推荐文章于 2024-04-05 06:42:51 发布

flyingpig2016

最新推荐文章于 2024-04-05 06:42:51 发布

阅读量1.3w

点赞数 1

分类专栏： javascript javascript高级程序设计解读 js事件文章标签： javascript js事件

本文链接：https://blog.csdn.net/flyingpig2016/article/details/52966375

版权

javascript 同时被 3 个专栏收录

49 篇文章 2 订阅

订阅专栏

javascript高级程序设计解读

31 篇文章 1 订阅

订阅专栏

js事件

17 篇文章 1 订阅

订阅专栏

我们都知道，dom事件处理程序有两种类型：DOM0级和DOM2级，其中DOM0级在文档中调用onclick事件，这种方法比较繁琐，DOM2级使用addEventListener()和removeEventListener()两个方法处理事件，这种方法比较常见，但是，ie人家牛逼，IE中也有类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的连个参数：事件处理程序，处理函数。废话不多说，直接上代码：

一：attachEvent()用法。

attachEvent()添加事件处理程序都会被添加到冒泡阶段：
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="divIe">你可以改变世界！</div>
</body>
<script type="text/javascript">
    var divIe = document.getElementById('div3Ie');
    divIe.attachEvent('onclick',function(){
        console.log('bangbang');
    });
</script>
</html>

二：attachEvent()和DOM0级和DOM2级方法的区别在哪？

attachEvent()里面的第一个参数是onclick而不是和addEventListener()中的click一样；
attachEvent()使用和使用DOM0级的区别主要在于事件处理程序的作用域。在使用DOM0级方法情况下，事件处理程序会在其所属的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此这里面的this相当于window。不过上面的程序我用Opera和chrome都不能测试成功，必须是ie浏览器才可以使用。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="btn">你可以改变世界！</div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    console.log(window.attachEvent);
    console.log(window.detachEvent);
    console.log(window.addEventListener);
    btn.attachEvent('onclick',function(){
        console.log('bangbang');
        console.log(this); //window
    });
</script>
</html>

另外，还有一点不同的是，使用attachEvent()绑定多个事件的时候，和addEventListener()以相反的顺序触发：例如：
在上面的程序中加入：

btn.attachEvent('onclick',function(){
        console.log('yanniu'); 
    });

然后执行程序后，先输出’yanniu’，然后再输出’bangbang’;
4. 和removeEventListener的作用一样，deachEvent()也可以移除attachEvent()添加的事件：

    function handler(){
        alert('删除');
    }
    btn.attachEvent('onclick',handler);
    btn.detachEvent('onclick',handler);

flyingpig2016

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中attachEvent()和detachEvent()使用方法 — 第13.2.4节

我们都知道，dom事件处理程序有两种类型：DOM0级和DOM2级，其中DOM0级在文档中调用onclick事件，这种方法比较繁琐，DOM2级使用addEventListener()和removeEventListener()两个方法处理事件，这种方法比较常见，但是，ie人家牛逼，IE中也有类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的连个参数：事件处理程
复制链接

扫一扫