事件监听的深入学习

事件监听

事件监听的常用方法：

1、onclick

优点：兼容性好。

缺点：只能给同一个事件绑定一个处理函数，如果绑定第二个，那么第二个便会覆盖掉第一个事件的处理函数。

绑定onclick方法的两种方式：

方式一：

<button onclick="test()">加载更多</button>

function test() {
    console.log("我是绑定onclick事件的方式一");
}

方式二：它的优先级大于方式一。

<button>加载更多</button>

let button = document.getElementsByTagName("button")[0];
button.onclick = function () {
    this.innerHTML = "加载中·····";
    this.className += "loading";

    let self = this;
    setTimeout(function () {
        self.innerHTML = "加载完成";
        self.className = "";
    }, 2000);
};

button.onclick = function () {
    console.log("这是我同一个事件的第二个处理函数"); //那么此时第一个事件处理函数便失效了
};

而对应的便是移除事件监听：

oBtn.onclick = false / null;

2、addEventListener

事件监听器 addEventListener（事件类型，事件处理函数，false）。

优点：相对于onclick方法，它可以给同一个事件绑定多个处理函数而不会覆盖。

缺点：IE9以下不支持。

<button>加载更多</button>

let oBtn = document.getElementsByTagName("button")[0];
//绑定的第一个事件处理函数
oBtn.addEventListener(
    "click",
    function () {
        this.innerHTML = "正在加载中";
        this.className = "loading";

        var self = this;
        setTimeout(function () {
            self.innerHTML = "加载完成";
            self.className = "";
        }, 1000);
    },
    false
);

//绑定的第二个事件处理函数并不会覆盖掉第一个事件处理函数
oBtn.addEventListener(
    "click",
    function () {
        console.log("我又给它绑定了第二个事件处理函数");
    },
    false
);

但是需要注意的是：如果将同一个事件处理函数多次绑定到同一个事件时，它只会被执行一次。

let oBtn = document.getElementsByTagName("button")[0];
oBtn.addEventListener("click", test, false);
oBtn.addEventListener("click", test, false);

function test() {
	console.log("我是测试函数"); //它只会打印一次
}

而对应的便是移除事件监听：

oBtn.removeEventListener("你所监听的事件", "事件回调", false);

**3、attachEvent **

事件监听器 attachEvent（事件类型，事件处理函数）。

特性：注意只适用于IE浏览器并且兼容IE8以及下。

与addEventListener的不同之处：

（1）参数不同(这里以点击事件click为例)：第一个参数为onclick；没有第三个参数。

（2）事件处理函数内部的this指向的是window。

var oBtn = document.getElementsByTagName("button")[0];

oBtn.attachEvent("onclick", function () {
    //注意：这里的this指向的是window
    oBtn.innerHTML = "正在加载中";
    oBtn.className = "loading";

    setTimeout(function () {
        oBtn.innerHTML = "加完成";
        oBtn.className = "";
    }, 1000);
});

需要注意的是：它也可以对同一个事件绑定多个处理函数，但是如果将同一个事件多次绑定到同一个事件时，那么被绑定几次便会被执行几次。

oBtn.attachEvent("click", test, false);
oBtn.attachEvent("click", test, false);

function test() {
	console.log("我是测试函数"); //被绑定几次便会被执行几次
}

而对应的便是移除事件监听：

oBtn.detachEvent("你所监听的事件", "事件回调");

对监听方法的兼容性写法的封装

<button>点击</button>

function addEvent(elem, type, func) {
    if (elem.addEventListener) {
        return elem.addEventListener(type, func, false);
    } else if (elem.onclick) {
        return (elem["on" + type] = func);
    } else {
        return elem.attachEvent("on" + type, function () {
            func.call(elem);
        });
    }
}

let oBtn = document.getElementsByTagName("button")[0];

//测试一下
addEvent(oBtn, "click", function () {
    console.log("我是测试的");
});