ul包含有多个子元素li和其他元素，点击子元素，只有是li元素的文字变成红色分析: ①:避免for循环，用事件委托给父元素ul，减少注册次数，提高程序性能②:添加判断条件，判断子元素的标签名是不是‘ㄩ③:若是，则文字变成红色

当你想要在用户点击`<ul>`下的任意子元素时，只让那些`<li>`元素的文字变为红色，可以采用以下步骤：

1. **事件委托**:
使用JavaScript的事件代理机制，将`click`事件绑定到`<ul>`元素上，而不是为每一个单独的子元素`<li>`或其它元素都添加事件监听器。这样做的好处是减少了事件处理器的数量，提高了性能，因为只需要处理一次事件，而不是多次。

// 选择器选取<ul>
const.ulElement = document.querySelector('ul');

// 绑定 click 事件到 ul 元素
ulElement.addEventListener('click', function(event) {
    // 阻止事件冒泡，防止父级元素触发默认行为
    event.stopPropagation();

    // 判断目标元素是否是 li
    if (event.target.tagName === 'LI') {
        // 如果是 li，更改其文字颜色
        event.target.textContent = '红色'; // 或者使用CSS样式更改为红色
    }
});

2. **检查元素类型**:
在事件处理函数内部，通过`event.target.tagName`获取点击的目标元素的标签名，然后做相应的判断。这里是直接用`'li'`来做比较，如果匹配则操作文字。

3. **文本颜色变化**:
可以直接修改`textContent`属性改变文字颜色，如上述代码所示。也可以设置CSS样式，比如`:style.color = 'red'`，这样更具可维护性。