什么是DOM

• DOM文档对象模型，以根元素开头展开成一颗树，描述了处理网页内容的方法和接口。根对象是

document（window.document）

DOM事件

• 举例，click就是一个事件，可以在后面绑定函数执行功能。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。
• 每个事件都要经历捕获和冒泡阶段 并且先从外到内进行捕获再从内到外进行冒泡

• 如上图中 DOM 事件有两种调用顺序（当点击子元素会触发父级元素身上的事件）

  • 第一种 事件捕获：会从 window 从外向内遍历至用户点击的按钮，寻找事件处理函数并调用

    div.addEventListener('click',(e)={console.log('我被点了')},true)

  • 第二种 事件冒泡：从用户点击的按钮从内往外遍历至 window，寻找事件处理函数并调用

    div.addEventListener('click',(e)={console.log('我被点了')})

    • 所有冒泡事件都可被取消

      div.addEventListener('click',(e)={
      e.stopProPagation  //停止冒泡
      console.log('我被点了')
      })

  • 如果没有父子则谁先监听就先调用谁

    事件委托

• 原理及作用：利用事件冒泡来监听未来生成的 dom 元素，当监听多个元素时减少监听器数量，节省内存

  <div></div>
  div.addEventListener('click',()=>{console.log('我被点了')})  //事件委托
  span.addEventListener('click',()=>{console.log('我被点了')}) //error 此时span不存在
  const span = document.createElement('<span></span>')
  const div = document.querySelector('div')
  div.appendChild(span)

  封装事件委托函数

  div.on(eventType,document,selector,fn){
    document.addEventListener(eventType,(e)=>{
      const t = e.currentTarget
    if(t.matches(selector)){    //t 是一个dom元素e.matches() === e.tagName.toLowerCase()
      fn()}
  })
  }

  阻止滚动事件

  x.addEventListener('wheel',()=>{e.preventDefault})   //阻止鼠标滚轮默认事件
  css: ::-webkit-scrollbar{width:0}  //使滚动条消失
  x.addEventListener('touchstart',()=>{e.preventDefault})  //阻止移动端触摸事件

  自定义事件

  const enevt = new CustomEvent('TQ',{
    detail:{name:'TQ',age:20}
  })
  button1.dispatchEvent(event)