首页 > 编程笔记 > JavaScript笔记 > JS事件 阅读:1,535

JS注册事件和销毁事件

本节示例讲解 JavaScript 事件的注册和销毁。

注册事件

在 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件。用法如下:

element.addEventListener(String type, Function listener, boolean useCaptrue);

参数说明如下:
【示例1】下面示例使用 addEventListener() 为所有按钮注册 click 事件。首先,调用 document 的 getElementsByTagName() 方法捕获所有按钮对象;然后,使用 for 语句遍历按钮集(btn),并使用 addEventListener() 方法分别为每一个按钮注册事件函数,获取当前对象所显示的文本。
<button id="btn1" onclick="btn1();">按 钮 1</button>
<button id="btn2" onclick="btn2(event);">按 钮 2</button>
<script>
    var btn = document.getElementsByTagName("button"); //捕获所有按钮
    for(var i in btn){                    //遍历按钮集合
      btn[i].addEventListener("click", function(){
        alert(this.innerHTML);
    }, true);   //为每个按钮对象注册一个事件处理函数,定义在捕获阶段进行响应
    }
</script> 
在浏览器中预览,单击不同的按钮,则浏览器会自动显示按钮的名称。效果如图所示:

使用 addEventListener() 方法能够为多个对象注册相同的事件处理函数,也可以为同一个对象注册多个事件处理函数。为同一个对象注册多个事件处理函数对于模块化开发非常有用。

【示例2】在下面示例中,为段落文本注册两个事件:mouseover 和 mouseout。当光标移到段落文本上面时会显示为蓝色背景,而当光标移出段落文本时会自动显示为红色背景。这样就不需要破坏文档结构为段落文本增加多个事件属性。
<p id="p1">为对象注册多个事件</p>
<script>
    var p1 = document.getElementById("p1");  //捕获段落元素的句柄
    p1.addEventListener("mouseover", function () {
        this.style.background = 'blue';
    }, true);  //为段落元素注册第1个事件处理函数
    p1.addEventListener("mouseout", function () {
        this.style.background = 'blue';
    }, true);  //为段落元素注册第2个事件处理函数
</script>

IE 事件模型使用 attachEvent() 方法注册事件。用法如下:

element.attachEvent(etype, eventName)

参数列表如下:
【示例3】在下面示例中,为段落标签 <p> 注册两个事件:mouseover 和 mouseout,设计当光标经过时,段落文本背景色显示为蓝色,当光标移开之后,背景色显示为红色。
<p id="p1">为对象注册多个事件</p>
<script>
    var p1 = document.getElementById("p1");  //捕获段落元素
    p1.attachEvent("onmouseover", function () {
        this.style.background = 'blue';
    });  //注册mouseover事件
    p1.attachEvent("onmouseout", function () {
        this.style.background = 'red';
    });  //注册mouseout事件
</script>

使用 attachEvent() 注册事件时,其事件处理函数的调用对象不再是当前事件对象本身,而是 window 对象,因此事件函数中的 this 就指向 window,而不是当前对象,如果要获取当前对象,应该使用 event 的 srcElement 属性。

IE 事件模型中的 attachEvent() 方法第 1 个参数为事件类型名称,需要加上 on 前缀,而使用 addEventListener() 方法时,则不需要这个 on 前缀,如 click。

销毁事件

在 DOM 事件模型中,使用 removeEventListener() 方法可以从指定对象中删除已经注册的事件处理函数。用法如下:

element.removeEventListener(String type, Function listener, boolean useCaptrue);

参数说明如下:

【示例1】在下面示例中,分别为按钮 a 和按钮 b 注册 click 事件,其中按钮 a 的事件函数为 ok(),按钮 b 的事件函数为 delete_event()。在浏览器中预览,当单击“点我”按钮将弹出一个对话框,在不删除之前这个事件时一直存在的。当单击“删除事件”按钮之后,“点我”按钮将失去任何效果。
<input id="a" type="button" value="点我" />
<input id="b" type="button" value="删除事件" />
<script>
    var a = document.getElementById("a");  //获取按钮a
    var b = document.getElementById("b");  //获取按钮b
    function ok(){       //按钮a的事件处理函数
         alert("您好,欢迎光临!");
    }
    function delete_event(){     //按钮b的事件处理函数
         a.removeEventListener("click",ok,false); //移出按钮a的click事件
    }
    a.addEventListener("click",ok,false);   //默认为按钮a注册事件
    b.addEventListener("click",delete_event,false); //默认为按钮b注册事件
</script>
演示效果如下图所示:

removeEventListener() 方法只能删除 addEventListener() 方法注册的事件。如果使用 onclick 等直接卸载元素上的事件,将无法使用 removeEventListener() 方法删除。

当临时注册一个事件时,可以在处理完毕之后迅速删除它,这样能够节省系统资源。

IE 事件模型使用 detachEvent() 方法注销事件。用法如下:

element.detachEvent(etype, eventName)

参数说明如下:

由于 IE 怪异模式不支持 DOM 事件模型,为了保证页面的兼容性,开发时需要兼容两种事件模型,以实现在不同浏览器中具有相同的交互行为。

【示例2】下面示例设计段落标签 <p> 仅响应一次光标经过行为。当第 2 个光标经过段落文本时所注册的事件不再有效。
<p id="p1">IE 事件注册</p>
<script>
    var p1 = document.getElementById("p1");  //捕获段落元素
    var f1 = function () {  //定义事件处理函数1
        p1.style.background = 'blue';
    };
    var f2 = function () {  //定义事件处理函数2
        p1.style.background = 'red';
        p1.detachEvent("onmouseover", f1);  //当触发mouseout事件后,注销mouseover事件
        p1.detachEvent("onmouseout", f2);  //当触发mouseout事件后,注销mouseout事件
    };
    p1.attachEvent("onmouseover", f1);  //注册mouseover事件
    p1.attachEvent("onmouseout", f2);  //注册mouseout事件
</script>

【示例3】为了能够兼容 IE 事件模型和 DOM 事件模型,下面示例使用 if 语句判断当前浏览器支持的事件处理模型,然后分别使用 DOM 注册方法和 IE 注册方法为段落文本注册 mouseover 和 mouseout 两个事件。当触发 mouseout 事件之后,再把 mouseover 和 mouseout 事件注销掉。
<p id="p1">IE 事件注册</p>
<script>
    var p1 = document.getElementById("p1");  //捕获段落元素
    var f1 = function () {  //定义事件处理函数1
        p1.style.background = 'blue';
    };
    var f2 = function () {  //定义事件处理函数2
        p1.style.background = 'red';
        if (p1.detachEvent) {  //兼容IE事件模型
            p1.detachEvent("onmouseover", f1);  //注销事件mouseover
            p1.detachEvent("onmouseout", f2);  //注销事件mouseout
        } else {  //兼容DOM事件模型
            p1.removeEventListener("mouseover", f1);  //注销事件mouseover
            p1.removeEventListener("mouseout", f2);  //注销事件mouseout
        }
    };
    if (p1.attachEvent) {
        p1.attachEvent("onmouseover", f1);
        p1.attachEvent("onmouseout", f2);
    } else {
        p1.addEventListener("mouseover", f1);
        p1.addEventListener("mouseout", f2);
    }
</script>

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章