Dom事件模型&事件委托

1.w3c事件模型[dom事件流]

W3C规定了Dom事件流的访问顺序为：先捕获 => 在冒泡?

        提供了执行调用监听事件两种事件流：冒泡流(默认) | 捕获流 

add.eventListner(eventName,fn,bool)

 [defult]bool === false  //调用监听函数顺序为冒泡流
         bool === true   //调用监听函数顺序为捕获流

例：饥人谷JS Bin

2. 如何阻止页面滚动

// 1.阻止鼠标滚轮滚动
x.addEventListener('wheel', (e)=>{
  e.preventDefault()
})


// 2.阻止触屏滚动
x.addEventListener('touchstart', (e)=>{
  e.preventDefault()
})



/* 3.隐藏滚动条 */
::-webkit-scrollbar {
 /*  width: 0 !important */
  overflow: hidden
}

例：https://jsbin.com/kayaweqoki/1/edit?html,css,js,output 

3.添加自定义事件

//生成一个自定义事件CustomEvent，添加事件信息detail
//触发事件dispatchEvent
button1.addEventListener('click',()=>{
  const event=new CustomEvent('frank',{
    detail: {name: 'frank',age: 18},
    bubbles: true,
    cancelable: true,
  })
  button1.dispatchEvent(event)
})


//监听自定义'frank'事件
div1.addEventListener('frank',(e)=>{
  console.log('click dispatchEvent frank')
  console.log(e.detail)
  console.log(e)
})

 运行：JS Bin - Collaborative JavaScript Debugging

4.事件委托

事件委托就是监听祖先元素，判断被点击的元素是否是我们想监听的元素，若是，则执行函数。 优点：节省内存  /  可以监听动态生成的元素

例1：监听父元素节省内存

//给多个相同子元素添加监听器，浪费太多内存 -> 监听其祖先元素，节省内存
div1.addEventListener('click',(e)=>{
  const t=e.target
  if(t.tagName.toLowerCase() === 'button'){
    console.log('button被点击了')
    console.log('button内容是'+t.textContent)
    console.log('button data-id:'+t.dataset.id)
  }
})

JS Bin - Collaborative JavaScript Debugging

例2： 可以监听动态生成的元素

//1s 后才生成的元素无法被监听 -> 事件委托,监听其父元素
setTimeout(()=>{
  const button=document.createElement('button')
  button.textContent='click 1'
  div1.appendChild(button)
},1000)


//显示父元素被监听
div1.addEventListener('click',(e)=>{
  const t=e.target
  if(t.tagName.toLowerCase()==='button'){
    console.log('button 被 click')
  }
})

JS Bin - Collaborative JavaScript Debugging

[事件委托原理：利用事件冒泡]

• 当元素的事件委托到它的父层或者更外层元素上的时候， 其实是绑定事件到外层元素
• 当事件响应到需要绑定的元素上时，会通过事件冒泡机制触发其外层元素的绑定事件，然后在外层元素上执行函数