事件周期
- 事件捕获：事件对象沿DOM树向下捕获。（head -> div）// ie没有事件捕获
- 目标触发：运行事件监听的函数
- 事件冒泡：事件沿DOM树向上冒泡。（div -> head）
- 利用事件冒泡：多个子元素定义了相同的处理函数，则只需在父元素上定义一次即可
<div onclick="calc(event)">
<button>1</button>
<button>2</button>
<button>3</button>
<button>C</button>
</div>
* 取消事件冒泡：
if(e.stopPropagation){
e.stopPropagation(); //dom
}else{
e.cancelBubble=true; //ie
}
event对象
- event.target 指向正在执行的元素
- event.currentTarget 永远指向事件绑定的元素
<head>
<title></title>
<meta charset="utf-8">
<script src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul').click(function(event){
$('#temp').html('指向(clicked):'+event.target.className); // 指向正事件执行的元素
//$('#temp').html('指向(clicked):'+event.currentTarget.className); // 永远指向事件绑定的元素
$(event.target).css('color','#ff3300')
})
})
</script>
</head>
<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF" class="title">
第一行
<li class="1">这是公告标题1</li>
<li class="2">这是公告标题2</li>
<li class="3">这是公告标题3</li>
<li class="4">这是公告标题4</li>
</ul>
</body>
