参考链接 MDN Web 文档
原理：EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
关联：EventTarget是由一个可以接收事件的对象实现的接口，并且可以为它们创建侦听器。Element，document 和 window是最常见的事件目标，但是其对象也可以是事件目标，比如XMLHttpRequest，AudioNode，AudioContext 等等。
语法：
target.addEventListener(type, listener, options);
target.addEventListener(type,listener,useCapture);
target.addEventListener(type,listener,useCapture,wantsUntrusted ); // Gecko/Mozilla only
参数：
type：表示监听事件类型的字符串。例子：click 在元素上按下并释放任意鼠标按键。select 有文本被选中。focus元素获得焦点（不会冒泡）。blur元素失去焦点（不会冒泡）。
listener：一个实现了 EventListener 接口的对象，或者是一个函数。如果是一个实现了EventListener接口的对象，应用场景可以是向关联改动；如果是一个函数监听触发后执行函数。
options：可选参数 false 或者 对象
capture:Boolean，表示 listener会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once:Boolean，表示listener 在添加之后最多只调用一次。如果是true，listener会在其被调用之后自动移除。
passive: Boolean，设置为true时，表示listener永远不会调用preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个Boolean，表示 listener 被添加到 system group。
useCapture： 可选
Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。默认 false
wantsUntrusted：
如果为true , 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko（chrome的默认值为true，其他常规网页的默认值为false），主要用于附加组件的代码和浏览器本身。
