<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery/jquery-1.11.3.min.js"></script>
</head>
<div class="pop">
<li class="Li">1</li>
<li class="Li">2</li>
<li class="Li">3</li>
<li class="Li">4</li>
</div>
<body>
<script>
/****************************************关于 on *************************************************/
//自 jQuery 版本 1.7 起，on()方法是bind()live()和delegate() 方法的新的替代品。该方法给 API 带来很多便利
//该方法可用于事件委托
$(‘div‘).on(‘click‘,‘li‘,function () {
alert($(this).text())
});
$(‘.pop‘).on(‘click‘,‘.Li‘,function () { //这种写法是为了区别选择器的时候经常忘记Li的那个点但其实没影响
alert($(this).text())
});
//注册多个事件情况写法
$(‘div‘).on({
click:function () {
console.log($(this).text())
},
mouseover:function () {
console.log($(this).text())
}
},‘li‘);
/*****************************************关于 bind ***************************************************/
//不支持事件委托
$(‘div‘).bind(‘click mouseover‘,function () { //绑定多个事件
alert($(this).text())
})
/*****************************************关于 delegate ************************************************/
//支持事件委托
$(‘div‘).delegate(‘li‘,‘click‘,function () { //写法位置有点区别
alert($(this).text())
})
</script>
</body>
</html>
