动态获取HTML中li标签内容并调用函数的方法

在JavaScript中，有几种方法可以动态获取被点击的<li>元素内容并调用相应函数。以下是几种常见的实现方式：

方法1：使用事件委托（推荐）

// 获取父元素（通常是ul或ol）
const list = document.getElementById('myList');

// 添加点击事件监听
list.addEventListener('click', function(event) {
  // 检查点击的是否是li元素
  if (event.target.tagName === 'LI') {
    const content = event.target.textContent;
    // 调用你的函数
    yourFunction(content);
  }
});

function yourFunction(content) {
  console.log('点击的内容是:', content);
  // 这里写你的处理逻辑
}

方法2：直接给每个li添加事件监听

// 获取所有li元素
const listItems = document.querySelectorAll('li');

// 为每个li添加点击事件
listItems.forEach(item => {
  item.addEventListener('click', function() {
    const content = this.textContent;
    yourFunction(content);
  });
});

function yourFunction(content) {
  console.log('点击的内容是:', content);
  // 这里写你的处理逻辑
}

方法3：使用事件冒泡和closest方法

document.addEventListener('click', function(event) {
  const liElement = event.target.closest('li');
  if (liElement) {
    const content = liElement.textContent;
    yourFunction(content);
  }
});

function yourFunction(content) {
  console.log('点击的内容是:', content);
  // 这里写你的处理逻辑
}

注意事项

1. 性能考虑：方法1（事件委托）性能最好，特别适合动态添加的列表项或大量列表项
2. 内容获取：除了textContent，你也可以使用innerHTML获取包含HTML标记的内容
3. 数据属性：如果li中有特定数据，可以使用data-*属性：

<li data-id="123">项目1</li>

// 在事件处理函数中获取
const id = event.target.dataset.id;

4. 事件对象：事件处理函数中的event对象还包含其他有用信息，如点击位置等

选择哪种方法取决于你的具体需求和项目结构。事件委托（方法1）通常是最灵活和高效的解决方案。