[JavaScript初级面试]8. WEB API

题目

• 编写一个通用的事件监听函数
• 描述事件冒泡的流程
• 无限下拉的图片列表，如何监听每个图片的点击

事件绑定

document.getElementById('btn').addEventListener('click', event => {
  console.log('clicked')
})

// event.target 触发事件的元素
// event.preventDefault() 阻止默认行为

事件冒泡

基于DOM树形结构；
事件顺着出发元素向上冒泡；
应用场景：时间代理

// event.stopPropagation() 阻止冒泡，只在当前事件触发节点响应

事件代理

<div id = "div3">
  <a href="#">a1</a>
  <a href="#">a2</a>
  <a href="#">a3</a>
  <a href="#">a4</a>
  <button>加载更多...</button>
</div>
// 点击加载更多，可以产生更多链接；点击每个链接触发不同的动作
const div = document.getElementById('div3')
// 统一把子元素的点击事件代理到父元素上，减少代码量
// 减少浏览器内存占用，不用每个a标签上绑定事件
// 不可以滥用，瀑布流比较适用
div.addEventListener('click', event => {
  event.preventDefault()
  const target = event.target
  if(target.nodeNamme === 'A') // 如果是A标签，排除按钮button触发的click事件
  // if(target.matches(selector)判断选择器是不是当前的触发元素
    alert(target.innerHTML)
})