addEventListener与removeEventListener实际应用

2017-11-05

主要介绍了addEventListener 的用法,需要的时候可以参考下

原文地址 http://www.qttc.net/201311382.html

addEventListener 添加监听事件函数，有三个参数。

一个参数：监听动作（必须）
第二个参数：触发函数（必须）
第三个参数：一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。（可选）
removeEventListener 移除解绑监听事件函数，有两个参数。
第一个参数：监听动作（必须）

第二个参数：绑定动作指定的函数体(必须)

实例1，直接在参数内传入一个匿名函数体：

1
2
3

element.addEventListener("click", function(){
    alert("Hello word!");
});

这种方式最简便，但不能解绑监听动作，如以下代码是无效的：

// 这种解绑方式是无效的
element.removeEventListener("click", function(){
    alert("Hello word!");
});

实例2，传入函数字面量

var handle = function(){
    alert("Hello word!");
};

element.addEventListener("click", handle);

如果要解绑监听事件很容易，如下：
1
element.removeEventListener("click", handle);

然而实际业务需要还是复杂的很多，仍然需要我们精心设计。

var main = function(){

    // 获取节点
    var button = document.querySelectorAll("button");

    // 获取一个随机数
    var rand = Math.random();

    // 单击处理函数
    var clickHandle = function(){
        alert(rand);
    };

    // 添加单击事件
    button[0].addEventListener("click", clickHandle);
};

window.onload = main;

以上代码是一个很普通的业务，处理函数体内能访问到rand变量是因为处理函数clickHandle是在main函数里声明的。假如处理函数来自别处，如：

// 单击处理函数
var clickHandle = function(){
    // rand访问不到
    alert(rand);
};

var main = function(){

    // 获取节点
    var button = document.querySelectorAll("button");

    // 获取一个随机数
    var rand = Math.random();

    // 添加单击事件
    button[0].addEventListener("click", clickHandle);

};

这样rand就访问不到了，所以对于addEventListener里的函数体如何传参数呢？我们可以这样做：

// 单击处理函数
var clickHandle = function(rand){
    return function(){
        alert(rand);
    };
};

var main = function(){

    // 获取节点
    var button = document.querySelectorAll("button");

    // 获取一个随机数
    var rand = Math.random();

    // 添加单击事件 把rand传入
    button[0].addEventListener("click", clickHandle(rand));

};

window.onload = main;

clickHandle先接收参数，然后再return一个匿名函数，这样就解决了addEventListener函数体传参的问题，然而上面的方案并不是很完美，因为不能解绑：

1 2	// 虽然传入的参数相同，返回的函数也一样，但这样是无效的操作 button[0].removeEventListener("click", clickHandle(rand));

因为JavaScript不能像Python能打出ID值，但我觉得removeEventListener解绑时，会根据传入函数的内存地址去搜寻addEventListener时传入函数的内存地址是否匹配，如果匹配就可以执行解绑操作。比如下面这个DEMO就很好的说明了这个问题：

//html代码
<button>alert</button>

//Js代码
var main = function(){

    // 获取节点
    var button = document.querySelectorAll("button");

    var handle1 = function(){
        alert("handle1");
    };

    var handle2 = function(){
        alert("handle2");
    };

    button[0].addEventListener("click", handle1);
    button[0].addEventListener("click", handle2);

};

给button添加了两个click事件，分别对应不同的handle，单击button后，会分别alert出handle1与handle2，
此时，我们可以通过以下代码解绑其中一个监听事件，但不会影响其它事件的监听

1 2	// 移除handle1的监听 button[0].removeEventListener("click", handle1);

因此回来看刚才的例子，完美的应该是这样：

// 单击处理函数
var clickHandle = function(rand){
    return function(){
        alert(rand);
    };
};

var main = function(){

    // 获取节点
    var button = document.querySelectorAll("button");

    // 获取一个随机数
    var rand = Math.random();

    // 获得匿名函数
    var handle = clickHandle(rand);

    // 添加单击事件 把rand传入
    button[0].addEventListener("click", handle);

    // 移除绑定事件
    button[0].removeEventListener("click", handle);

};

window.onload = main;

addEventListener 添加监听事件函数，有三个参数。

removeEventListener 移除解绑监听事件函数，有两个参数。

实例1，直接在参数内传入一个匿名函数体：

实例2，传入函数字面量