首页 > 其他分享 >动态加载的li如何绑定事件?

动态加载的li如何绑定事件?

时间:2024-12-09 09:35:42浏览次数:9  
标签:元素 target 绑定 li ul 事件 动态 加载

动态加载的 <li> 元素无法通过在 HTML 中直接绑定事件的方式进行处理,因为绑定事件的代码在动态加载 <li> 之前就已经执行完毕了。你需要使用事件委托机制。

事件委托的核心思想是将事件监听器绑定到父元素上,利用事件冒泡机制,当子元素触发事件时,事件会冒泡到父元素,从而触发父元素上的监听器。这样,即使子元素是动态添加的,也能触发事件。

以下是几种实现方式:

1. 使用 on 方法 (jQuery)

如果使用 jQuery,最简洁的方法是使用 on 方法:

$(document).ready(function() {
  // 将事件处理程序绑定到 ul 元素上
  $("ul").on("click", "li", function(event) {
    // this 指向当前点击的 li 元素
    console.log("Clicked:", $(this).text());
  });

  // 动态添加 li 元素
  $("ul").append("<li>New Item</li>");
});

2. 使用 addEventListener (原生 JavaScript)

原生 JavaScript 可以使用 addEventListener 方法实现事件委托:

document.addEventListener('DOMContentLoaded', function() {
  const ul = document.querySelector('ul');

  ul.addEventListener('click', function(event) {
    // 检查事件目标是否为 li 元素
    if (event.target && event.target.nodeName === 'LI') {
      console.log("Clicked:", event.target.textContent);
    }
  });

  // 动态添加 li 元素
  const newLi = document.createElement('li');
  newLi.textContent = 'New Item';
  ul.appendChild(newLi);
});

3. 改进的原生 JavaScript 方法 (针对大量动态添加)

如果频繁地动态添加 <li> 元素,可以优化一下,将事件目标的判断条件缓存起来:

document.addEventListener('DOMContentLoaded', function() {
  const ul = document.querySelector('ul');
  const isLi = (el) => el && el.nodeName === 'LI'; // 缓存判断条件

  ul.addEventListener('click', function(event) {
    let target = event.target;
    while (target && target !== ul) { // 遍历父元素直到 ul 或找到 li
      if (isLi(target)) { // 使用缓存的判断条件
        console.log("Clicked:", target.textContent);
        break; // 找到后停止遍历
      }
      target = target.parentNode;
    }
  });

 // ... 动态添加 li 元素 ...
});

选择哪种方法?

  • 如果你已经使用了 jQuery,那么 on 方法是最简洁的。
  • 如果你更倾向于使用原生 JavaScript,那么 addEventListener 方法是首选。
  • 如果你需要频繁地动态添加 <li> 元素,那么改进的原生 JavaScript 方法可以提供更好的性能。

关键点:

  • 事件委托: 将事件监听器绑定到父元素上,利用事件冒泡机制处理子元素的事件。
  • 性能: 事件委托比为每个动态添加的元素都绑定事件监听器更高效。
  • 灵活性: 使用事件委托,即使元素是之后动态添加的,也能正确地响应事件。

记住要根据你的具体情况选择最合适的方法。 希望这些信息能帮到你!

标签:元素,target,绑定,li,ul,事件,动态,加载
From: https://www.cnblogs.com/ai888/p/18594220

相关文章

  • 当页面中使用application/xhtml+xml会出现什么问题吗?
    使用application/xhtml+xml作为MIME类型在前端开发中可能会出现一些问题,尽管在理想情况下它应该提供更严格的验证和结构。主要问题源于浏览器对XHTML的支持不一致以及与旧版浏览器和服务器的兼容性问题。以下是可能出现的一些问题:浏览器兼容性:并非所有浏览器都完全支......
  • 写一个左中右的满屏布局,左右固定220px,中间自适应并且要优先加载
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Left-Center-RightLayout&l......
  • 不加class和id使得倒数三个li背景色为红色
    Youcanachievethisusingthenth-last-child()CSSselector.Here'show:<ul><li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li><li>Item5</li><li>It......
  • Spring Cloud Alibaba:一站式微服务解决方案
    一、简介SpringCloudAlibaba(简称SCA)是一个基于SpringCloud构建的开源微服务框架,专为解决分布式系统中的服务治理、配置管理、服务发现、消息总线等问题而设计。它集成了阿里巴巴开源的各种分布式服务技术,提供了一系列高效、灵活且易于使用的解决方案,帮助开发者更方便地搭......
  • Living-Food-自制 主食: 米线/米粉
    Living-Food-自制主食:米线/米粉自制米线(口感好、不会断版本)备料:压丝器、精密电子秤原料:水磨大米粉、马铃薯淀粉、小麦淀粉制作步骤:1.称粉2.烫熟粉3.揉匀成团;4.挤丝:放入压面机5.压入沸水锅中完成......
  • Cipher004__斯坦福密码学__Discrete Probability第二讲
    Independence独立性独立事件同时发生直接相乘XOR异或之间以为是相同得0,不同得1这里DanBoneh老师指出XOR是相加mod2定理:Y是随机分布,X是均匀随机分布,相互独立,那么Z(即X⊕Y)是均匀分布这里Pr[Z=0]=P0/2+P1/2=1/2Thebirthdayparadox生日悖论取随机变量r的......
  • scikit-learn中的Pipeline:构建高效、可维护的机器学习流程
    我们使用scikit-learn进行机器学习的模型训练时,用到的数据和算法参数会根据具体的情况相应调整变化,但是,整个模型训练的流程其实大同小异,一般都是加载数据,数据预处理,特征选择,模型训练等几个环节。如果训练的结果不尽如人意,从数据预处理开始,再次重新训练。今天介绍的Pipeline(中文......
  • Flink对于迟到数据的处理
    水印:对于迟到数据不长allowedLateness:迟到时间很长侧道输出:对于迟到时间特别长对于延迟数据的理解:水印机制(水位线、watermark)机制可以帮助我们在短期延迟下,允许乱序数据的到来。这个机制很好的处理了那些因为网络等情况短期延迟的数据,让窗口等它们一会儿。但是水印......
  • Linux中的rpm命令
    `rpm`(RedHatPackageManager)是一个用于管理基于RPM的Linux发行版(如RedHat、CentOS、Fedora等)软件包的命令行工具。你可以使用`rpm`命令来查询、安装、卸载、升级和验证RPM软件包。###常用的`rpm`命令:1.**查询已安装的软件包**:  ```bash  rpm-q<pa......
  • 五分钟快速入门,linux用户和用户组操作!
    在Linux系统中,用户和用户组的管理是系统管理的核心部分。本文将带你深入了解Linux用户和用户组的管理技巧,从基础操作到高级技巧,让你轻松掌握用户管理的艺术。用户和用户组的关系在Linux中,用户和用户组的关系可以简单概括为三种:一对一、一对多、多对多。这意味着一个用户可以......