写一个使用事件委托处理大量 DOM 元素的案例

简介: 【10月更文挑战第29天】

以下是一个使用事件委托处理大量 DOM 元素的案例:

HTML 代码:

<ul id="itemList">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
  <li>项目 6</li>
  <li>项目 7</li>
  <li>项目 8</li>
  <li>项目 9</li>
  <li>项目 10</li>
</ul>
AI 代码解读

JavaScript 代码:

document.getElementById('itemList').addEventListener('click', function(event) {
   
  if (event.target.tagName === 'LI') {
   
    console.log('点击了项目:' + event.target.textContent);
  }
});
AI 代码解读

在这个案例中,我们将点击事件委托给了 #itemList 元素。当点击列表中的任何一个 <li> 元素时,都会触发事件处理函数,并在控制台输出被点击的项目的内容。这样就避免了为每个 <li> 元素单独绑定事件处理函数,提高了代码的效率和可维护性。

目录
打赏
0
2
2
0
101
分享
相关文章
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
93 4
|
3月前
|
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
391 1
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
41 0
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。