事件委托_实现页面导航

● 本节我们将使用事件委托来事件导航的平滑滚动；
● 首先我们使用传统的的方法来进行实现

document.querySelectorAll('.nav__link').forEach(function (el) {
  el.addEventListener('click', function (e) {
    e.preventDefault(); //取消默认HTML的跳转行为
    const id = this.getAttribute('href');  //取HTML中href的内容
    document.querySelector(id).scrollIntoView({ behavior: 'smooth' });  //实现平滑滚动
  });
});

● 但是这种效率并不高，如果我们导航里面有1000个链接，我们就需要取创建1000个副本来完成此次点击事件，这显然效率很低；

document.querySelector('.nav__links').addEventListener('click', function (e) { //选择父元素
  e.preventDefault();//取消默认HTML的跳转行为
  //匹配策略
  if (e.target.classList.contains('nav__link')) { //判断我们点击的源事件是否包含nav__link
    const id = e.target.getAttribute('href');  //如果包含的话，就获取这个事件的href，用于跳转
    document.querySelector(id).scrollIntoView({ behavior: 'smooth' });/实现平滑滚动
  }
});