基于数据选择器属性的Javascript触发事件

const links = document.querySelectorAll('li a');

links.forEach(link => {
  link.addEventListener('mouseenter', event => {
    if (!link.classList.contains('open')) {
      link.classList.add('hover');
    }
  });
  link.addEventListener('mouseleave', event => {
    link.classList.remove('hover');
  });
  link.addEventListener('click', event => {
    link.classList.remove('hover');
    link.classList.toggle('open');
    const dataSelector = link.getAttribute('data-selector');
    if (dataSelector === 'nav a') {
      console.log('this is a [nav a] link');
    } else {
      console.log('this is NOT a [nav a] link');
    }
  });
});

.hover {
  color: blue;
}
.open {
  color: green;
}

<li>
  <a href="#" data-parent="1" data-selector="nav a">Blog</a>
</li>
<li>
  <a href="#" data-parent="1" data-selector="not nav a">Home</a>
</li>