前端——事件冒泡

前言

分享一些平时前端学习中遇到的比较重要的函数，同时加强自身的记忆

事件冒泡

事件冒泡是指触发子级的某类事件，像onclick()事件等，所有父级对象的所有同类事件都会被触发直到达到最顶层document或者window。事件冒泡可以让多个操作被集中处理，也可以在对象层的不同级别捕获事件。下面介绍一个利用事件冒泡原理的事件——事件委托。

$(function(){
	//这里的click()代码虽然只有一句，但其实是把.list中的li都绑定一遍，对性能不利。
	$('.list li').click(function(){
		$(this).css({'background-color':'lightblue'}); //$(this)指需要委托的子元素
	});
	$('.list').append($('<li>新的li标签</li>'));
})

上面代码通过append在表ul的最后新加入了一个li标签，测试后发现上面的click()函数对新加入的li标签并不管用，需要再次用click()绑定一遍才可以，太麻烦。此时就要用到事件委托delegate()。

$(function(){
	//父级ul来完成子级li中的click的工作
	$('.list').delegate('li','click',function(){  
		$(this).css({'background-color':'red'});
	})
})

此时在ul中重新添加一个li标签：

$(function(){
	//父级ul来完成子级li中的click的工作
	$('.list').delegate('li','click',function(){  
		$(this).css({'background-color':'red'});
	})
	$('.list').append($('<li>新的li标签</li>'));
})

再次测试时上面的click()函数对新加入的li标签起作用了。可见事件委托可以提高处理事件的效率，同时对新加入的元素标签也起作用。

阻止事件冒泡

凡是都有两面性，事件冒泡这么好用，但有时候也会成为负担，需要阻止它。下面介绍两种阻止的方式。

一、通过event对象上的stopPropagation来阻止

$('.father').click(function(event){
				alert('father');
				// ie9以上兼容
				event.stopPropagation();
				//ie678兼容
				event.cancelBubble = true;
			})

二、通过return false来阻止

$('.grandfather').click(function(){
				alert('grandfather');
				//阻止事件冒泡和阻止默认行为的统一写法
				return false;
			})

return false不但可以阻止事件冒泡，还可以阻止默认行为（阻止表单提交），同时可以结束函数运行。