1.節(jié)點(diǎn)對(duì)象.on(事件名，事件驅(qū)動(dòng)程序)
直接給指定標(biāo)簽綁定事件
(a). 事件取掉on
(b).this是事件源，是這個(gè)事件源對(duì)應(yīng)的js對(duì)象。改變內(nèi)容其他的都是用js的方法。
(c).想要當(dāng)做jQ來(lái)用，先轉(zhuǎn)成jQery.
2.父節(jié)點(diǎn)對(duì)象.on(事件名，選擇器,事件驅(qū)動(dòng)程序)
(a).拿到父節(jié)點(diǎn)對(duì)象，再在里面選中選擇器的那個(gè)標(biāo)簽，再給他綁定事件。
(b).就是拿到節(jié)點(diǎn)對(duì)象里的子標(biāo)簽給綁定事件。
3.兩種的區(qū)別：
(a).第一種綁定方式，如果在后面添加了就綁定不了不能執(zhí)行。
(b).而父標(biāo)簽給子標(biāo)簽綁定事件的時(shí)候，是可以在后面添加是可以執(zhí)行的。
(c).任何綁定方式中this都是事件源。
4.事件捕獲：和js一樣。
evt.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js">
</script>
</head>
<body>
<div id="div1">
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</div>
<button id="addBtn">添加</button>
<hr />
<div id="div2" style="background-color: yellow;">
<!--<p>我是段落1</p>-->
<button>按鈕4</button>
<button>按鈕5</button>
<!--<p>我是段落2</p>-->
<button>按鈕6</button>
</div>
<button id="addBtn2">添加</button>
<!---------1.事件綁定-------------->
<script type="text/javascript">
//1)節(jié)點(diǎn)對(duì)象.on(事件名,事件驅(qū)動(dòng)程序) - 直接給指定的節(jié)點(diǎn)綁定事件
//注意: 事件名要去掉on
$('#div1>button').on('click', function(evt){
//注意: 這兒的this是事件源，但是是js的對(duì)象
console.log(this)
$(this).css('color', 'red')
//事件捕獲：和js一樣
evt.stopPropagation()
})
console.log($('button').text()) // 按鈕1按鈕2按鈕3
$('#addBtn').on('click', function(){
$('#div1').append($('<button>新按鈕</button>'))
})
//2)節(jié)點(diǎn)對(duì)象.on(事件名,選擇器,事件驅(qū)動(dòng)程序) - 通過(guò)父標(biāo)簽給選擇器選中的子標(biāo)簽綁定事件
$('#div2').on('click', 'button',function(){
alert('按鈕點(diǎn)擊')
console.log(this)
})
$('#addBtn2').on('click', function(){
$('#div2').append($('<button>新按鈕</button>'))
})
</script>
</body>
</html>
