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

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

其他事件文章

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

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

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

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

1. 注册事件

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

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

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

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

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

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

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

示例：

JS代码：

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

HTML代码：

1	`<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开发之路系列文章

posted on 2016-02-21 15:04 FangMu 阅读(21914) 评论(0) 编辑收藏举报

搜索

随笔分类 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

其他事件文章

目录

1. 注册事件

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

JS代码：

HTML代码：

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

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

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

1.3 addEventListener()方法注册事件

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

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

1.4 attachEvent()方法注册事件

示例：

1.5 JQuery中的事件注册方式

示例：

2. 注销事件

2.1 removeEventListener(eventName, function Object)

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

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

2.2 detachEvent(eventName, function Object)

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

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

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

2.3 取消事件

示例：