域名备案需要网站吗,茶的网站制作,免费动画制作网站,湖北省随州市建设厅网站#x1f383;个人专栏#xff1a; #x1f42c; 算法设计与分析#xff1a;算法设计与分析_IT闫的博客-CSDN博客 #x1f433;Java基础#xff1a;Java基础_IT闫的博客-CSDN博客 #x1f40b;c语言#xff1a;c语言_IT闫的博客-CSDN博客 #x1f41f;MySQL#xff1a… 个人专栏 算法设计与分析算法设计与分析_IT闫的博客-CSDN博客 Java基础Java基础_IT闫的博客-CSDN博客 c语言c语言_IT闫的博客-CSDN博客 MySQL数据结构_IT闫的博客-CSDN博客 数据结构​​​​​​数据结构_IT闫的博客-CSDN博客 CC_IT闫的博客-CSDN博客 C51单片机C51单片机STC89C516_IT闫的博客-CSDN博客 基于HTML5的网页设计及应用基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​ pythonpython_IT闫的博客-CSDN博客 离散数学离散数学_IT闫的博客-CSDN博客 ​​​​​​Linux​​​​Linux_Y小夜的博客-CSDN博客 RustRust_Y小夜的博客-CSDN博客 欢迎收看希望对大家有用 目录 功能简介 代码解析 核心代码 效果展示 功能简介 这段代码实现了一个简单的列表项添加和点击变色的功能。具体功能包括 1. 页面中有一个按钮点击按钮可以添加一个新的列表项到ul元素中。 2. 初始时页面已经包含了一个带有四个固定内容的列表项。 3. 点击任意一个列表项该列表项的背景颜色会变成红色。 4. 使用了事件委托的方式在ul元素上添加了一个点击事件监听器当点击ul下的li元素时会检查点击的元素是否为li如果是则将其背景改为红色。 总体来说这段代码实现了动态添加列表项和点击列表项改变样式的基本功能同时利用事件委托的方式提高了性能确保新添加的列表项也具有相同的交互效果。 代码解析 当添加列表项按钮被点击时调用addLi函数在该函数内动态创建一个li元素并将其插入到class为menu的ul元素中。 input typebutton value添加列表项 onclickaddLi()function addLi() {var ll document.createElement(li);ll.innerHTML 新增的列表项;document.querySelector(.menu).appendChild(ll); }在这里事件委托被使用来为ul添加点击事件监听器。当点击ul下的li元素时其背景颜色会变成红色。 //事件委托将事件监听委托给祖先元素一般委托给父元素 //事件委托实现的原理是利用事件冒泡 //1.先获取到ul var ul document.querySelector(.menu); //2.为ul添加click事件 ul.onclick function (e) {if (e.target.nodeName LI)e.target.style.backgroundColor red; };通过事件委托可以在新的li元素被添加时仍然能够保持对它们的事件监听。 核心代码 input typebutton value添加列表项 onclickaddLi()效果展示