直接上代碼
<!DOCTYPE html>
<html>
<head>
<title>js事件委托測試</title>
</head>
<body>
<div id='box'></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.item{
background-color: yellow;
margin: 10px;
padding: 10px;
color: black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var addItem = function(){
htmlStr = ''
for(var i=0; i<10; i++){
htmlStr += (`<div class="item">${i}</div>`)
}
$('#box').html(htmlStr)
}
addItem()
$('.item').bind('click', function(event){
alert('item')
event.stopPropagation()// 阻止冒泡
})
$('#box').bind('click', function(event){
alert('box')
})
})
</script>
</body>
</html>
jquery.bind()
查詢官方api可看見回調方法傳入值為event， 通過event就能阻止事件后續傳播
js事件模型
