事件委派

开发工具与关键技术： VS 2019    单词                      

作者：魏钦

撰写时间：2022/5/8

1. 首先打开我们的VS软件，CTRL+ N新建一个HTML文档，在body标签里放一个input标签(文本框)，然后再给input标签一个id，添加在括号里面空格之后再写不然会报错，做一个表格样式，用ul跟li搭配，ul可以作为一个组，li是他的子元素，将他俩用嵌套的方式使用，ul包裹li标签，就这样一个简易的表格就出来了。
2. 然后在ul标签放个id在从里面放三个li标签，三个li标签里面各自都放一个a标签，形成a标签之后他会有一个自带的属性href，这个是跳转链接，如果你有链接可以放上去，没有的话就放一个#号，这样你点击的时候就不会跳转到其他页面了，然后在a标签中间写上文字区分，也可以跟我的一样，格式写法如下。

<input type="button" value="添加列表项" id="btn">

    <ul id="uu">

        <li><a href="javascript:;">列表一</a></li>

        <li><a href="javascript:;">列表二</a></li>

        <li><a href="javascript:;">列表三</a></li>

    </ul>

1. 在ul结束标签下面放个script标签作为我们写js代码的区域，接下来就要先获取上面的元素了，声明一个变量var空格然后随便一个字母，空格等于号，有些空格是为了看着简洁，有的是必要的为他没不要连起来，不然浏览器识别不出来，写js代码大部分空格为了简洁，等于号后面也要空格，然后document(文档)点，然后getElementById括号，括号里面双引号，双引号里面放ul的id。

var ulObj = document.getElementById("uu");

1. 操作个上一个获取等于号前面的一样，等于号后面放第一个获取的id然后一个点，表示连接，get跟上一个是一样的不一样的是y后面的字母，y后面TagName（注意大小写），然后括号里面也是差不多的，只需要把字母改成a就行了。

var aObjs = ulObj.getElementsByTagName("a");

document(文档)点getElementById括号，括号里面双引号，双引号里面放input的id，在括号后面点，onclick（鼠标单击）空格等于号空格，function（）然后花括号，然后就是创建元素了，声明一个变量，选择你所要创建的标签名，这个案例创建的是li标签，如果感兴趣的可以创建别的，等于号前后都要空格，等于号createElement（关键字）括号双引号li标签。var li = document.createElement("li");

1. 然后li点innerHTML等于号单引号然后把之前写的a标签复制上去，把a标签里面的文字改成别的以便观察。

li.innerHTML = '<a href="javascript:;">新建的列表项</a>';

1. 最后往ul标签里面添加li标签，放上你第一个获取的名字，然后点，appendChils（关键字）括号，这次不用放引号，就直接li标签。

ulObj.appendChild(li);