事件委派
我们希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
案例演示：为ul列表中的所有a标签都绑定单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="u1">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
var u1 = document.getElementById("u1");
// 为ul绑定一个单击响应函数
u1.onclick = function (event) {
event = event || window.event;
// 如果触发事件的对象是我们期望的元素，则执行，否则不执行
if (event.target.className == "link") {
console.log("我是ul的单击响应函数");
}
};
</script>
</body>
</html>
问题一:u1.onclick = function (event) {
event = event || window.event
｝中，
event 这个参数名可以随便改变,如mevent = mevent，前提是参数也要mevent。
event 是一个事件对象，发生事件时，他会生成一个一个“事件信息包，这个包就是event，浏览器会接收这个参数，不考虑兼容性，这行代码可以删除。但是由于IE浏览器不能自动接收参数，因此需要兼容性赋值，为了接下来的使用，如使用事件对象的方法等，window.event是基于浏览器的一种方法，IE浏览器支持。
问题二:冒泡就冒泡，他冒泡也是从内到外，题干上写的是给内部的添加方法，答案给外面的添加方法有什么用？
if (event.target.className == "link") {
console.log("我是ul的单击响应函数");
}
event.target是事件对象的一个方法，定义是第一个点击他的那个元素，也就是还没冒泡，他通过这种方式，选中了a，由于a本身也是属于链接性，所以不用添加点击事件，点击的话会自动提交事件对象，因此通过这种方法选中了a，只要是点击了a,就会输出"我是ul的单击响应函数",相当于把方法直接给了ul，ul 事件函数判断点击的是否是a，如果是，就输出，极大节省了性能开销。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
