事件的委派

文献种类：专题技术文献；
开发工具与关键技术： VS、JS
作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 8 月 28日
下面我们来看一下Javascript里事件的委派，
首先我们要知道事件的委派是什么，
事件的委派就是将事件统一绑定给元素共同的祖先元素，
这样当后代元素上的事件触发时，会一直冒泡到祖先元素，
从而通过祖先元素的响应函数来处理事件。
我们在为每一个a标签绑定一个单击响应事件时，
这种操作比较麻烦，而且这种操作只能为已有的a标签绑定单击事件，
新添加的超链接需要重新绑定，十分不方便。
所以我们可以用事件的委派来解决这种操作，
使其变得简便。具体操作如下：
首先我们用代码实现一个button按钮并把它ID命名为btn，
然后再ID名为list的ul标签里准备三个li标签，
并给上各自一个href属性的属性值为javascript：；的a标签。如图：

然后再页面加载事件里获取到button按钮、ul标签和li里面的所有a标签。如图：

然后给button按钮创建一个点击事件，
再用createElement()方法创建一个li标签。
然后用innerHTML属性为创建好的li添加一个a标签。
最后再用appendChild()方法向ul追加文本节点li。
这样就可以在点击botton按钮时向已有的li里重新添加一个新的li。
具体代码如下：

然后我们开始运用for循环给a标签添加点击事件，
使其被点击时用提示框提示“a标签被点击了”。如图所示：

到这里我们会发现在运行的时候，
只有最开始在页面上的a标签有点击事件，
而我们后面通过button按钮新添加的a标签并不会触发点击事件。
这时候我们就可以通过事件的委派来解决这个问题，
我们先把上面的for循环给注释掉，
然后为ul创建一个点击事件，
然后用event=event||window.event;这条代码适配浏览器，
防止代码运行的时候出现bug。
接下来我们在控制台输出一下event.target.nodeName，
然后我们发现输出结果为A，
这个A是我们后面if判断用的条件。
再然后我们用if语句来判断当event.target.nodeName==A的时候，
我们用提示框提示“a标签被点击了”。如图：

最后我们运行一下，会发现不仅原来的a标签有点击事件，
就连我们通过button按钮新添加的a标签也有了点击事件。
这样我们的委派就成功了。
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
可以使我们的代码更加简便。