1.节点对象.on(事件名，事件驱动程序)
直接给指定标签绑定事件
(a). 事件取掉on
(b).this是事件源，是这个事件源对应的js对象。改变内容其他的都是用js的方法。
(c).想要当做jQ来用，先转成jQery.
2.父节点对象.on(事件名，选择器,事件驱动程序)
(a).拿到父节点对象，再在里面选中选择器的那个标签，再给他绑定事件。
(b).就是拿到节点对象里的子标签给绑定事件。
3.两种的区别：
(a).第一种绑定方式，如果在后面添加了就绑定不了不能执行。
(b).而父标签给子标签绑定事件的时候，是可以在后面添加是可以执行的。
(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)节点对象.on(事件名,事件驱动程序) - 直接给指定的节点绑定事件
//注意: 事件名要去掉on
$('#div1>button').on('click', function(evt){
//注意: 这儿的this是事件源，但是是js的对象
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)节点对象.on(事件名,选择器,事件驱动程序) - 通过父标签给选择器选中的子标签绑定事件
$('#div2').on('click', 'button',function(){
alert('按钮点击')
console.log(this)
})
$('#addBtn2').on('click', function(){
$('#div2').append($('<button>新按钮</button>'))
})
</script>
</body>
</html>
