addEventListener() 方法

监听就是当满足某种条件触发一种或者多种方法，对的，监听可以同时执行多个方法

语法

*element*.addEventListener(*event, function, useCapture*);

第一个参数是事件的类型 (如 "click" 或 "mousedown").注意这里和前面的事件写法不一样，以前没有on了

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向原元素添加事件句柄

当用户点击元素时弹出 "Hello World!" :

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

同时添加多个

var x=document.getElementById('two')
x.innerHTML='test'
function showred(){           //添加颜色事件
    x.style.color='red'
}
function showbig(){·
    x.style.backgroundColor='yellow'       //添加大小，背景事件
    x.style.fontSize='90px'
}
x.addEventListener("click",showbig)
x.addEventListener("click",showred)          //最后当你点击的时候可以触发所有的监听

这里涉及的基本都是事件，写法就是把on给去掉

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){    //页面重置的时候
    document.getElementById("demo").innerHTML = sometext;
});

事件冒泡或事件捕获？

主要就是第3个参数的作用，第三个参数，true就是捕获，false就是冒泡。默认值是false

冒泡

内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

捕获

外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件

removeEventListener() 方法

很简单就是去除某个监听

element.removeEventListener("mousemove", myFunction);