#yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托

简介: #yyds干货盘点# 前端歌谣的刷题之路-第一百六十一题-事件委托

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣

题目

描述

请补全JavaScript代码,要求如下:

1. 给"ul"标签添加点击事件

2. 当点击某"li"标签时,该标签内容拼接"."符号。如:某"li"标签被点击时,该标签内容为".."

注意:

1. 必须使用DOM0级标准事件(onclick)

image.png

编辑

核心代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件委托</title>
</head>
<body>
  <script type="text/javascript">
    // 补全代码
    document.querySelector('ul').onclick = function (e) {
      e.target.innerText += '.'
    }
  </script>
</body>
</html>
相关文章
|
3月前
|
前端开发 JavaScript 开发者
掌握Web前端事件处理精髓:从事件冒泡到事件委托,轻松优化你的交互体验与代码性能!
【8月更文挑战第23天】在Web前端开发中,事件处理是实现用户交互的关键机制。其中,事件冒泡与事件委托是优化页面性能、简化代码的重要手段。事件冒泡是指事件从触发它的元素开始,沿着DOM树向上逐层传播至根节点的过程。通过阻止事件冒泡,可以控制事件的影响范围。而事件委托则是利用事件冒泡特性,在父元素上设置监听器来响应子元素的事件,这种方法减少了监听器的设置数量,特别适用于动态添加的子元素,提高了代码的可维护性和性能。掌握这两种技术,能帮助开发者构建更高效、更简洁的应用程序。
54 0
|
6月前
|
前端开发 JavaScript
【Web 前端】什么是事件冒泡?什么是事件委托?
【4月更文挑战第22天】【Web 前端】什么是事件冒泡?什么是事件委托?
|
6月前
|
前端开发 JavaScript 容器
前端中的事件委托
前端中的事件委托
75 0
|
前端开发 JavaScript 容器
前端小知识:事件委托及其应用
本文通过实际案例介绍前端中的事件委托及其应用。
85 0
|
前端开发 API
歌谣学前端之react三个api之一续集
歌谣学前端之react三个api之一续集
60 0
|
前端开发 JavaScript 开发者
前端祖传三件套JavaScript的DOM之事件的事件委托
在前端开发中,事件处理是非常重要的一部分。JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件,并且事件委托是其中不可或缺的一部分。本文将介绍 JavaScript 中的事件委托。
118 1
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
121 0
#yyds干货盘点 歌谣学前端之react笔记之学习日历样式的设置
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
111 0
#yyds干货盘点 歌谣学前端之react笔记之第一个react项目
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
#yyds干货盘点 歌谣学前端之react笔记之学习之类组件
111 0
|
前端开发
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
#yyds干货盘点 歌谣学前端之react笔记之学习之函数组件
69 0