前言
分享一些平时前端学习中遇到的比较重要的函数,同时加强自身的记忆
事件冒泡
事件冒泡是指触发子级的某类事件,像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不但可以阻止事件冒泡,还可以阻止默认行为(阻止表单提交),同时可以结束函数运行。