Seb's leetcode

# 题目描述

请补全JavaScript代码，要求如下：

  1. 给"ul"标签添加点击事件
  2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."

注意：

  1. 必须使用DOM0级标准事件（onclick）

# 测试用例

function test() {
  const lis = document.querySelectorAll("li");
  li1 = lis[0];
  li2 = lis[1];
  li3 = lis[2];
  li1.click();
  li2.click();
  li3.click();
  return (
    li1.innerText === ".." && li2.innerText === ".." && li3.innerText === ".."
  );
};
1
2
3
4
5
6
7
8
9
10
11
12

# 分析

  • target表示当前触发事件的元素
  • currentTarget是绑定处理函数的元素

TIP

只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样

题目要求使用事件代理，也即是不要在自身绑定onclick,我们可以选择它的父元素ul

# 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<ul>
            <li>.</li>
            <li>.</li>
            <li>.</li>
        </ul>

        <script type="text/javascript">
            // 补全代码
            document.querySelector('ul').onclick = function(e) {
               e.target.innerText += '..'
            }
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20