HTML 事件(二) 事件的注册与注销

　　本篇主要介绍HTML元素事件的注册、注销的方式。

其他事件文章

1. HTML 事件(一) 事件的介绍

2. HTML 事件(二) 事件的注册与注销

3. HTML 事件(三) 事件流、事件委托

4. HTML 事件(四) 模拟事件操作

目录

1. 注册事件：介绍通过元素的事件属性、addEventListener()以及attachEvent()方法进行事件的注册。

2. 注销事件：介绍通过removeEventListener()、detachEvent()以及事件属性赋值为null来进行事件的注销。

1. 注册事件

注册事件的方式其实有2种：一种属性注册，另一种通过方法注册。

①属性注册方式又可分为在HTML元素内的事件属性赋值和通过JS指定元素对象的事件属性。

②方法注册方式可通过addEventListener()或attachEvent()方法进行事件的注册。

1.1 设置HTML元素属性为事件处理程序

说明：在HTML页面中，设置元素属性为一个函数。

语法：<button onlick="sayHello()">点击</button>

注意：事件属性是以"on"开头，后面跟着事件名称。如：onclick、onload。

示例：

JS代码：

function sayHello() {
    console.log('hello')
}

HTML代码：

<button onclick="sayHello()">点击</button>

1.2 通过JS设置元素对象的属性为事件处理程序

说明：通过JS获取元素的对象，设置其事件属性为一个事件处理程序。

语法：EventTarget.onEventName=function(e){};

注意：事件属性是以"on"开头，后面跟着事件名称。如：onclick、onload。

唯一性：属性注册具有唯一性；同一个事件，最后注册的处理程序将会覆盖前面注册的处理程序。

示例1：事件属性注册的演示

// 注册body的click事件
document.body.onclick = function (e) {
    alert(1);
};

示例2：事件属性注册的唯一性

document.body.onclick=function(e){
    console.log(1);
}

// 会覆盖前面注册的事件处理程序
document.body.onclick=function(e){
    console.log(2);
}

document.body.click(); // => 2 ：只输出后面属性注册的

1.3 addEventListener()方法注册事件

说明：在JS中，window、document、HtmlElement等对象可以通过addEventListener()方法注册事件的处理程序。

语法：EventTarget.addEventListener(eventName, eventHandler, |useCapture )

参数：

①eventName {string} ：所要注册的事件名称，不区分大小写。此名称不需要像注册事件属性那样前缀加上"on"。如注册鼠标点击事件，写为click。

②eventHandler {function | function Object} ：函数或者函数对象。事件触发时所需要执行的函数；当使用函数对象多次注册同一事件时，只当注册一遍。

③useCapture {boolean} 可选 ：是否处于捕获阶段，默认为false。

多次注册：addEventListener()方法能为同一个对象的同一事件注册多次。当发生此事件时，注册的处理事件程序将按照注册先后顺序执行。

注意：

①IE9之前的IE的不支持此方法，可使用attachEvent()代替。

②若使用相同的事件处理程序对象多次注册在同一个事件上，只算注册一次。

示例1：多次注册同一事件，按注册顺序执行，先输出1，再输出2

document.body.addEventListener('click',function(e){
     console.log('1');
});

document.body.addEventListener('click',function(e){
    console.log('2');
});

document.body.click(); // => 1,2

示例2：使用函数对象多次注册同一事件：只当注册一次

function sayHello(){
    console.log('hello');
}

document.body.addEventListener('click',sayHello);
// 使用处理程序多次注册同一事件，只当注册一次
document.body.addEventListener('click',sayHello);

document.body.click(); // => hello ：只输出一遍

1.4 attachEvent()方法注册事件

说明：IE9之前的IE版本可通过此方法注册事件。

语法：EventTarget.attachEvent(eventName, eventHandler)

①eventName {string} ：所要注册的事件名称，区分大小写。这里的名称跟事件属性一样，以"on"开头，后面跟着事件名称。如：onclick、onload。

②eventHandler {function | function Object} ：函数或者函数对象。事件触发时所需要执行的函数；当使用函数对象多次注册同一事件时，可注册多次(addEventListener()方法只当注册一次)。

多次注册：attachEvent()方法能为同一个对象的同一事件注册多次。当触发此事件时，也会依次执行。

示例：

function say(){
    console.log('1');
}
document.body.attachEvent('onclick',say);
document.body.attachEvent('onclick',say); // say第二次注册同一事件

document.body.click(); // => 1 1 ：输出了2次say函数

1.5 JQuery中的事件注册方式

JQuery中的事件注册方式对多浏览器的差异性进行了解决：判断元素是否含有addEventListener()或者attachEvent()方法。

示例：

function add(element,type, eventHandle){
	if (element.addEventListener) {
		element.addEventListener(type, eventHandle, false);
	} else if (element.attachEvent) {
		element.attachEvent("on" + type, eventHandle);
	}
}

2. 注销事件

可以注册元素的事件， 相应的可以也注销元素的事件。

JS中，可调用removeEventListener()[对应于addEventListener()] 和detachEvent()[对应于attachEvent()]来注销元素的某个事件指定的处理程序，也可以给事件属性赋值null来注销此事件的所有绑定。

2.1 removeEventListener(eventName, function Object)

说明：注销通过addEventListener()注册的事件处理程序。

语法：EventTarget.removeEventListener(eventName, eventHandlerObj)

参数：

①eventName {string} ：所要注销的事件名称，不区分大小写。此名称不需要像注册事件属性那样前缀加上"on"。如注册鼠标点击事件，写为click。

②eventHandlerObj {function Object} ：函数对象。传入一个函数体是没有效果的。

示例1：通过addEventListener()注销事件

function sayHello(e) {
    console.log('1');
}

// 注册body click事件
document.body.addEventListener('click', sayHello);

// 注销body click事件的sayHello函数
document.body.removeEventListener('click',sayHello);

document.body.click(); // 触发click事件，不输出任何结果

示例2：若第二个参数为函数体，将不会注销

function sayHello(e) {
    console.log('1');
}

// 注册body click事件
document.body.addEventListener('click', sayHello);

// 第二个参数为函数体，虽然跟sayHello函数的内容一样，但不会注销
document.body.removeEventListener('click', function(e) {
    console.log('1');
});

document.body.click(); // => 1 ：输出结果为1，并没有注销成功

　　

2.2 detachEvent(eventName, function Object)

说明：注销通过attachEvent()注册的事件处理程序。

语法：EventTarget.detachEvent(eventName, eventHandlerObj)

参数：

①eventName {string} ：所要注销的事件名称，区分大小写。这里的名称跟事件属性一样，以"on"开头，后面跟着事件名称。如：onclick、onload。

②eventHandlerObj {function Object} ：：函数对象。传入一个函数体是没有效果的。

示例1：通过detachEvent()注销事件

function sayHello() {
    console.log('1');
}
document.body.attachEvent('onclick', sayHello);

document.body.detachEvent('onclick', sayHello); // 注销事件

document.body.click(); // 不输出结果

示例2：若第二个参数为函数体，将不会注销

function sayHello() {
    console.log('1');
}
document.body.attachEvent('onclick', sayHello);

// 第二个参数为函数体，虽然跟sayHello函数的内容一样，但不会注销
document.body.detachEvent('onclick', function (e) {
    console.log('1');
});
document.body.click(); // => 1 ：输出结果为1，并没有注销成功

示例3：多次注册与多次注销

因为attachEvent()可以把一个函数对象多次注册到元素同一个事件上，所以调用一次detachEvent()只能注销掉一次。

function sayHello() {
    console.log('1');
}
document.body.attachEvent('onclick', sayHello);
document.body.attachEvent('onclick', sayHello); // 注册了2次

document.body.click(); // => 1 1：输出2次

document.body.detachEvent('onclick', sayHello); // 注销1次

document.body.click(); // => 1 ：输出结果为1，只注销了1次

2.3 取消事件

给对象的事件属性赋值为null，可取消此事件的所有注册过的处理事件程序。

示例：

document.body.addEventListener('onclick', function(e){
    console.log(1);
});
document.body.addEventListener('onclick', function(e){
    console.log(2);
});

document.body.onclick=null; // onclick属性赋值为null，相当于注销了onclick事件

document.body.click(); // 无操作

End

Web开发之路系列文章

菜单加载中...