浏览器DOM事件

DOM （document of Mode ）即 文档对象模型 是一种与编程语言及平台无关的API(Application programming Interface)，借助于它程序能够动态地访问和修改文档内容、结构或显示样式。
DOM事件主要分 DOM 0级  、DOM 2 级  、DOM 3级 事件，

1.DOM 0 级事件
 例 const  el = document.getElementById('el');
    el.onclick = function() { }；
 删除DOM 0 级事件 只需要把 对应的事件属性 置为null 即可   el.onclick = null ; 
DOM 0 级事件 一个事件处理程序只能对应一个处理函数，且 只能在事件冒泡阶段执行

2. DOM 2 级事件
DOM 2 级事件  包含了三个事件 分别是 事件捕获  、 处于目标阶段  、 事件冒泡阶段。
DOM 2 级事件  指定了添加事件处理 和移除事件处理的方法  分别 是 addEventListener（eventName，func，true/false）；
removeEventListener（eventName，func，true/false）；
 参数分别为 ： 事件处理属性名 、 事件处理函数  、   捕获阶段（true）还是 冒泡阶段（false） 处理事件
例如 ：const  el = document.getElementById("btn");
   const  handler = function(){ …}  ；
el.addEventListener（'click'，handler，false)；
el.removeEventListener（'click'，handler，false)；
注：a）与DOM 0 级事件相比  监听 的事件属性名 都不带on ，例如 点击事件 ‘click’；
       b)  处理函数中的this 仍然指向 当前的 dom ；
       c） 通过  addEventListener  添加的事件处理函数，  只能通过 removeEventListener 移除同一个事件处理函数才能生效，也就是 addEventListener  添加的匿名事件函数 将无法被删除。

 3. DOM 3 事件  
DOM 3 事件写法  和  DOM 2  事件 类似， 只是增添了更多的事件类型

UI 事件：当前用户与页面的元素交互时触发：load，scroll

焦点事件：当元素获得或失去焦点时触发：blur，focus

鼠标事件：当用户通过鼠标在页面执行操作时触发：dblclick，mouseup

滚轮事件：当使用鼠标滚轮或类似设备时触发：mousewheel

文本事件：当在文档中输入文本时触发：textinput

键盘事件：当用户通过键盘在页面上执行操作时触发：keydown，keypress

合成事件：当为 IME（输入法编辑器）输入字符时触发：compositionstart

变动事件：当底层 DOM 结构发生变化时触发：DOMsubtreeModified

同时 DOM 3级事件也允许使用者自定义一些事件
 

自定义事件如下 ：

创建事件 ：Event 是无法传递参数的 const  event = new Event('build') 
CustomEvent 允许传递参数   const   event = new CustomEvent('build', { detail: 'Hello world' })；
监听事件 ： el.addEventListener('build',handler,false);
触发事件： el.dispatchEvent(event);

event  事件对象使用
a.  阻止默认行为 event.preventDefault(); 阻止 a标签跳转  表单自动提交。
b. 1   event.stopPropagation()  ,阻止事件冒泡到父元素，阻止父元素的任何事件执行。
   2.  event.stopImmediatePropagation()  既阻止事件冒泡到父元素，也阻止当前元素的同事件类型被触发。

关于事件相关的  手写订阅发布模式