<div class="wrap" id="wrap">
<ul class="level1">
<li class="1">a
<ul class="level2">
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li class="2">b
<ul class="level2">
<li>b1</li>
<li>b2</li>
</ul>
</li>
</ul>
</div>
由于DOM元素的事件冒泡机制,当为div.wrap绑定click事件时,点击其任意子元素,都会响应click事件。
$(".wrap").on('click', function(event){
alert($(this).attr("class")); // 点击div.wrap任意子元素,输出都为wrap
});
$(".wrap").on('click', function(event){
var node = event.target;
alert($(node).attr("class")); // 点击div.wrap任意子元素,会输出具体点击的DOM元素的class
});