addEventListener()与removeEventListener(),追加监听事件和删除监听事件

一、addEventListener()与removeEventListener()用于追加事件和删除追加。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 
最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false;

1.要在按钮上为click事件添加事件处理程序，可以使用下列代码：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
   alert(this.id);
}, false);

2.使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。来看下面的例子：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.addEventListener("click", function () {
    alert("Hello World");
}, false);

3.通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除，在这个例子中，removeEventListener无法删除addEventListener所追加的事件，因为两个方法并不相等，内存地址已经是不同的，如下面的例子所示：

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
    alert(this.id);
}, false);
btn.removeEventListener("click", function () {  // 无效！
    alert(this.id);
}, false);

4.addEventListener添加的监听事件和removeEventListener移除事件是同一个方法时，才可以移除有效，如下面的例子所示：

var btn = document.getElementById("myBtn");
var handler = function () {
        alert(this.id);
    };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);  //有效！

二、关于对屏幕变化监听响应页面方法：

1.使用window.onresize（缺点：无法在页面离开时关闭监听）：

window.onresize = function () {
  console.log('屏幕监听到了')
}

2.使用window.addEventListener（可以在页面离开时关闭监听）：

let sizeFun = function () {
 console.log('屏幕监听')
}
window.addEventListener('resize', sizeFun )
window.removeEventListener('resize', sizeFun )