addEventListener

addEventListener

1. 概念：EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行

2. 原理： 将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。

3. 语法：

   • target.addEventListener(type, listener, options)
   • target.addEventListener(type, listener, useCapture)
   • target.addEventListener(type, listener, useCapture, wantsUntrusted ); // Gecko/Mozilla only

4. 参数：

   1. type：监听事件类型的字符串

   2. listener：当监听事件触发时会收到一个事件通知对象。因此 listener 必须是一个实现了EventListener接口的对象，或者是一个函数

      1. EventListener 接口对象，对象中必须含有 handleEvent 属性，切为一个方法

          let obj = {
              //... 其他属性
              handleEvent: function() {
                  方式
              }
          }
          // 这样可以做一些自定义的东西
          let obj2 = {
              a: 1,
              handleEvent: function() {
                  console.log(this.a)
              }
          }
      

   3. options：一个指定有关 listener 属性的可选参数对象

      • capture： Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发(false 表示不捕获该过程，会继续往下走，为 true 表示需要捕获该过程)
      • once： Boolean，表示在添加事件后最多执行一次，如果该属性为 true，则在执行一次后立即销毁
      • passive：Boolean，表示 listener 永远不会调用 prevenDefault（），如果 listener 仍然调用了这个函数，那么会报警告(Unable to preventDefault inside passive event listener invocation.)

   <div class="line" id="line">
       <div class="left" id="left">left</div>
       <div class="right">right</div>
   </div>
   // 点击left执行顺序： body -》 left -》 line
   const leftDom = document.getElementById('left')
   const lineDom = document.getElementById('line')
   leftDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		e.preventDefault()
   		console.log('left', e.target)
   	},
   	{
   		capture: true,
   		passive: false,
   	}
   )
   lineDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('line', e)
   	},
   	{
   		capture: false,
   	}
   )
   document.body.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('body')
   	},
   	{
   		capture: true,
   	}
   )
   // 点击left执行顺序： body -》 line -》 left
   leftDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('left', e.target)
   	},
   	{
   		capture: true,
   	}
   )
   lineDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('line', e)
   	},
   	{
   		capture: true,
   	}
   )
   document.body.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('body')
   	},
   	{
   		capture: true,
   	}
   )
   // 点击left执行顺序： body -》 line -》 left
   leftDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('left', e.target)
   	},
   	{
   		capture: true,
   	}
   )
   lineDom.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('line', e)
   	},
   	{
   		capture: true,
   	}
   )
   document.body.addEventListener(
   	'click',
   	function (e) {
   		// e.stopPropagation()
   		console.log('body')
   	},
   	{
   		capture: true,
   	}
   )