事件的委派

• 事件的委派指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
• 事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

例子： 

 HTML代码：

<button id="btn">添加超链接</button>
<ul id="ul">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>

预期效果：通过点击按钮，可以向ul中添加超链接列表，点击超链接时会弹出窗口，输出超链接的文本内容

JavaScript 代码：

window.onload = function () {
//获取按钮
var btn = document.getElementById("btn");
//获取ul
var ul = document.getElementById("ul");
//为按钮绑定单击响应函数
btn.onclick = function () {
//创建一个li
var li = document.createElement("li");
//创建新的超链接
li.innerHTML = "<li><a href='javascript:;''>新的超链接</a></li>";
//获取新添加的超链接
var a = li.getElementsByTagName("a")[0];
//为新创建的超链接绑定响应函数
a.onclick = function () {
alert(a.innerHTML);
};
//将li添加到ul中
ul.appendChild(li);
};
//获取所有的超链接
var alla = document.getElementsByTagName("a");
//为所有的超链接绑定单击响应函数
for (var i = 0; i < alla.length; i++) {
alla[i].onclick = function () {
alert(this.innerHTML);
};
}
};

 这种为每个超链接都绑定一个单击响应函数比较麻烦，而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定。可以用事件的委派只绑定一次事件，即可应用到多个元素上，即使是后添加的元素。可以将单击事件绑定给ul来实现。

JavaScript代码：

window.onload = function () {
//获取按钮
var btn = document.getElementById("btn");
//获取ul
var ul = document.getElementById("ul");
//为按钮绑定单击响应函数
btn.onclick = function () {
//创建一个li
var li = document.createElement("li");
//创建新的超链接
li.innerHTML = "<li><a href='javascript:;''>新的超链接</a></li>";
//将li添加到ul中
ul.appendChild(li);
};
//为ul绑定单击响应函数
ul.onclick = function(event){
event = event||window.event;
//target,用于表示触发事件的对象
//如果触发的对象是期望的元素，则执行，否则不执行
if(event.target.className == "link")
{
alert(event.target.innerHTML);
}
};
};

最后

以上就是激动电脑为你收集整理的事件的委派的全部内容，希望文章能够帮你解决事件的委派所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。