前端之深入理解dom事件

EventTarget.addEventListener()

EventTarget.addEventListener(type, eventListener, options)
type: 事件类型， click ,dbclic, mouseenter, mouseleave,blur, change, input等；
eventListener:事件监听函数或者带有handleEvent属性（值为函数才可以）的对象；
options: 对象或者boolean; 
          boolean代表此事件是否需要被捕获，fasle非捕获，true可以被捕获
          options: {
         		capture:  Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
				once:  Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
				passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。使用passive可以改变滚屏的性能
                signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
 			    mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 Boolean，表示 listener 被添加到 system group。
          }

EventTarget.addEventListener()方法将指定的监听器（addEventListnener）注册到 EventTarget 上
当注册的事件触发的时候，就会执行对应的eventListener。
给元素注册一个事件函数，当执行的事件执行触发的时候会触发对应的的eventListener，如果有同一个元素有多个eventListener
注意
可以给同一个EventTarget，同一个事件类型注册多个eventListener。js中会有一个事件池来存放这些evenListener,这里是先进先出，类似于队列的数据结构。

EventListener

EventListener 接口表示的对象可以处理 EventTarget 对象所调度的事件。
EventListener
1、可以接受一个函数
2、也可以接受带有 handleEvent() 函数属性的对象。

<button id="btn"></button>
btn.addEventListener('click', {
 handleEvent:()=>{ //一个在特定类型的事件被调用时运行的函数
 	console.log('handleEvent');
 }
}, false); //不捕获只冒泡
btn.addEventListener('click',()=>{
	console.log('capture')
}
}, true); //捕获
// 运行结果： handleEvent capture

备注

给eventTarget注册监听器，类似与发布订阅模式
订阅
给eventTarget订阅了事件对应的listener

eventTarget.addEventListener('click', fn1, false);
eventTarget.addEventListener('click', fn2, false);
eventTarget.addEventListener('click', fn3, false);
eventTarget.addEventListener('click', fn4, false);
eventTarget.addEventListener('click', fn5, false);
eventTarget.addEventListener('click', fn6, false);

订阅的时候就以此执行注册的函数