什么是事件？事件的实现原理？

• 事件是通过某一时刻某一个动作而触发的一个操作。事件的形成有两步：第一步是事件的预先定义；第二步事件触发；

• 事件的实现是通过订阅发布模式实现，即在代码运行中预先定义事件(订阅)，在后面某个操作触发这个预先定义好的事件，执行事件处理程序；

• web端Dom事件分为三类：一类：dom节点通过onclick绑定事件，通过dom.onclick = null来解绑事件；二类：dom节点通过addEventListener()方法注册事件，通过removeEventListener()来注销事件；三类：css中设置ui事件，比如：hover事件，焦点事件(input框)等；

• Dom二类事件(dom通过addEventListener定义事件)的事件流分为三个阶段，依次为捕获阶段(父->子)、目标阶段、冒泡阶段(子->父)，事件触发顺序为捕获阶段–目标阶段–冒泡阶段；

  	<div>
          <p id="pEle">我是父级元素<span id="cEle">我是子级元素</span></p>
      </div>
      <script>
          const pNode = document.getElementById('pEle');
          const cNode = document.getElementById('cEle');
          
  		// 事件一：冒泡触发
          pNode.addEventListener('click', function() {
              alert('我是父级冒泡')
          }, false);
  
  		// 事件二：捕获触发
          pNode.addEventListener('click', function() {
              alert('我是父级捕获')
          }, true);
  
  		//事件四-order2：捕获触发
          // cNode.addEventListener('click', function() {
          //    alert('我是子级捕获')
          // }, true);
  
  		// 事件三：冒泡触发
          cNode.addEventListener('click', function() {
              alert('我是子级冒泡')
          }, false);
          
          // 事件四-order1：捕获触发
          cNode.addEventListener('click', function() {
            	alert('我是子级捕获')
          }, true);
  		
          /* 
          点击我是子级元素文字触发事件顺序为：父级捕获-子级冒泡-子级捕获-父级冒泡，原因是先执行
          捕获流事件程序，再执行目标流事件程序(执行目标流事件程序中的事件的顺序与冒泡事件和捕获事件
          类型无关，与目标事件的定义前后顺序相关，即两种事件谁先定义谁先执行，后定义者后执行)，最
          后执行冒泡流事件程序。注意：当捕获流事件中存在目标流事件，则将事件归为目标事件流中执行；
          */
  
  		/*
  		
  		/*
  		点击我是父级元素文字触发事件顺序为：父级捕获-父级冒泡
  		/*
  		针对目标事件流的执行顺序，我们将事件四-order2显示，事件四-order1隐藏，则点击我是子
  		元素文字触发件，触发顺序：父级捕获-子级捕获-子级冒泡-父级冒泡
  		*/
  		
      </script>