- stopPropagation()
<style>
html * { margin:0; padding:0; }
body { margin-left:300px; margin-top:60px; }
#parent { width:200px; height:200px; border:1px solid red; background-color: yellow; padding:150px;}
#child { width:200px; height:200px; background-color: red; color:#FF0000 }
</style>
<script>
$(document).ready(function(){
$('#child').bind('click', function(event){
event.stopPropagation(); // 주석처리후에 실행하면 자식엘리먼트 클릭시 부모엘리먼트도 클릭이벤트가 실행됨
$(this).css('background-color', 'pink');
});
$('#parent').bind('click', function(event){
$(this).css('background-color', 'green');
});
});
</script>
</head>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
