php 页面销毁事件,JS注册事件和销毁事件

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

注册事件

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

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

参数说明如下：

type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有 on 前缀。例如，对于事件属性 onclick 来说，所对应的事件类型为 click。

listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时，默认传递给它的唯一参数是 event 对象。

useCaptrue：是一个布尔值。如果为 true，则指定的事件处理函数将在事件传播的捕获阶段触发；如果为 false，则事件处理函数将在冒泡阶段触发。

【示例1】下面示例使用 addEventListener() 为所有按钮注册 click 事件。首先，调用 document 的 getElementsByTagName() 方法捕获所有按钮对象；然后，使用 for 语句遍历按钮集(btn)，并使用 addEventListener() 方法分别为每一个按钮注册事件函数，获取当前对象所显示的文本。

按 钮 1

按 钮 2

var btn = document.getElementsByTagName("button"); //捕获所有按钮

for(var i in btn){                    //遍历按钮集合

btn[i].addEventListener("click", function(){

alert(this.innerHTML);

}, true);   //为每个按钮对象注册一个事件处理函数，定义在捕获阶段进行响应

}

在浏览器中预览，单击不同的按钮，则浏览器会自动显示按钮的名称。效果如图所示：

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

【示例2】在下面示例中，为段落文本注册两个事件：mouseover 和 mouseout。当光标移到段落文本上面时会显示为蓝色背景，而当光标移出段落文本时会自动显示为红色背景。这样就不需要破坏文档结构为段落文本增加多个事件属性。

为对象注册多个事件

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个事件处理函数

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

element.attachEvent(etype, eventName)

参数列表如下：

etype：设置事件类型，如 onclick、onkeyup、onmousemove 等。

eventName：设置时间名称，也就是事件处理函数。

【示例3】在下面示例中，为段落标签

注册两个事件：mouseover 和 mouseout，设计当光标经过时，段落文本背景色显示为蓝色，当光标移开之后，背景色显示为红色。

为对象注册多个事件

var p1 = document.getElementById("p1"); //捕获段落元素

p1.attachEvent("onmouseover", function () {

this.style.background = 'blue';

}); //注册mouseover事件

p1.attachEvent("onmouseout", function () {

this.style.background = 'red';

}); //注册mouseout事件

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

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

销毁事件

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

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

参数说明如下：

type：注册事件的类型名。事件类型与事件属性不同，事件类型名没有 on 前缀。例如，对于事件属性 onclick 来说，所对应的事件类型为 click。

listener：监听函数，即事件处理函数。在指定类型的事件发生时将调用该函数。在调用这个函数时，默认传递给它的唯一参数是 event 对象。

useCaptrue：是一个布尔值。如果为 true，则指定的事件处理函数将在事件传播的捕获阶段触发；如果为 false，则事件处理函数将在冒泡阶段触发。

【示例1】在下面示例中，分别为按钮 a 和按钮 b 注册 click 事件，其中按钮 a 的事件函数为 ok()，按钮 b 的事件函数为 delete_event()。在浏览器中预览，当单击“点我”按钮将弹出一个对话框，在不删除之前这个事件时一直存在的。当单击“删除事件”按钮之后，“点我”按钮将失去任何效果。

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注册事件

演示效果如下图所示：

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

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

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

element.detachEvent(etype, eventName)

参数说明如下：

etype：设置事件类型，如 onclick、onkeyup、onmousemove 等。

eventName：设置时间名称，也就是事件处理函数。

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

【示例2】下面示例设计段落标签

仅响应一次光标经过行为。当第 2 个光标经过段落文本时所注册的事件不再有效。

IE 事件注册

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事件

【示例3】为了能够兼容 IE 事件模型和 DOM 事件模型，下面示例使用 if 语句判断当前浏览器支持的事件处理模型，然后分别使用 DOM 注册方法和 IE 注册方法为段落文本注册 mouseover 和 mouseout 两个事件。当触发 mouseout 事件之后，再把 mouseover 和 mouseout 事件注销掉。

IE 事件注册

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);

}