js实现target

实现目标（target）的方法

在JavaScript中，"target"通常指事件触发时的目标元素，可以通过事件对象的target属性获取。以下是几种常见的使用场景和实现方法：

事件监听中的target

通过事件监听器获取触发事件的元素：

document.addEventListener('click', function(event) {
  const targetElement = event.target;
  console.log('Clicked element:', targetElement);
});

动态修改目标元素属性

获取目标元素后修改其样式或内容：

document.querySelector('.btn').addEventListener('click', (e) => {
  e.target.style.backgroundColor = 'red';
  e.target.textContent = 'Clicked!';
});

事件委托中的target应用

利用事件冒泡机制处理动态元素：

document.getElementById('parent').addEventListener('click', (e) => {
  if(e.target.classList.contains('child')) {
    console.log('Child element clicked:', e.target);
  }
});

表单处理中的target

表单提交时获取表单元素：

document.forms[0].addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log([...formData.entries()]);
});

自定义目标元素选择

结合其他DOM方法精确选择目标：

document.addEventListener('mouseover', (e) => {
  const hoveredElement = e.target.closest('.hoverable');
  if(hoveredElement) {
    hoveredElement.classList.add('highlight');
  }
});

注意事项

• event.target指向触发事件的原始元素，而event.currentTarget指向当前处理事件的元素
• 对于动态生成的元素，建议使用事件委托而非直接绑定
• SVG元素在某些浏览器中可能需要对target进行额外处理
• 在React等框架中，合成事件系统的target行为可能与原生DOM略有不同