14、jQuery事件处理之事件委派使用示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
html,body{
text-align: center;
font-size: 20px;
}
div{
margin: 0 auto;
border: 1px solid black;
}
#cn{
float: left;
margin: 50px;
width: 420px;
height: 340px;
line-height: 40px;
}
#bj{
width: 340px;
height: 260px;
}
#hd{
width: 260px;
height: 180px;
}
#ppc{
width: 180px;
height: 95px;
}
#usa{
float: left;
margin: 50px;
width: 420px;
height: 340px;
}
</style>
<script>
$(document).ready(function(){
/*
$('input').focus(function(){
$('#ppc').append("<span>Sian</span>");
});
$('#ppc').click(function(){
// 1、trigger模拟鼠标事件,triggerHandler只执行相关事件
// 2、triggerHandler只匹配第一个对象元素执行相关事件
// 3、triggerHandler返回值为undefined
$('input').trigger('focus');
$('input').triggerHandler('focus');
});
// 从性能上说，绑定太多的事件处理函数将影响性能
$('#cn').click(function(event){
alert("cn");
event.stopPropagation();
});
$('#bj').click(function(event){
alert("bj");
event.stopPropagation();
});
$('#hd').click(function(event){
alert("hd");
event.stopPropagation();
});
$('#ppc').click(function(event){
alert("ppc");
event.stopPropagation();
});
*/
// 通过绑定一个事件处理函数，统一接收事件
$('#cn').click(function(event){
var elem = $(event.target);
if (elem.is('#cn')) alert("cn");
if (elem.is('#bj')) alert("bj");
if (elem.is('#hd')) alert("hd");
if (elem.is('#ppc')) alert("ppc");
});
});
</script>
</head>
<body>
<div id="cn">
<span>中国</span>
<div id="bj">
<span>北京</span>
<div id="hd">
<span>海淀</span>
<div id="ppc">
<span><a href="http://www.baidu.com">www.ppc.com</a></span>
<input type="text"/>
</div>
</div>
</div>
</div>
<div id="usa">
<span>美国</span>
</div>
</body>
</html>
页:
[1]