jQuery之事件委托

事件绑定

.bind() 为所匹配元素的特定事件绑定事件处理函数

语法：bind(type,[data],fn)

• 有效率问题，等页面加载完成时，bind()方法才执行;
• 常适用于页面元素的静态绑定，需注意，只能给已存在元素的绑定事件，不能给即将新添的元素绑定事件

.live() 为被选元素添加一个或多个事件处理程序，需注意当这些事件发生时运行的函数
语法：live(type,[data],fn)

• live()只能放在直接选择的元素后，层级深就不能绑定事件
• live()事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上
• 与bind()方法不同的是，给新添的元素不需要再一次绑定事件
• live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除，用on()方法替代
• 使用旧版本的用户，应该优先用.delegate() 来替代 .live()

.delegate() 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
语法：delegate(type,[data],fn)

• 可用于动态添加的元素上
• 性能优于.live()，可以更小范围，更加精确的 绑定事件
• 可更快的冒泡，可以在第一时间就进行事件处理，但需要择近的父级元素

以上三种事件委托，现在可以.on()方法替代

.on() 在选择元素上绑定一个或多个事件的事件处理函数

语法：on(events,[selector],[data],fn)
events：一个或多个用空格分隔的事件类型
selector：元素的子元素选择器
data：当一个事件被触发时要传递event.data给事件处理函数
fn：事件被触发时执行的函数

另外有一个只运行一次就删除的函数方法：one()

1. 绑定一个或多个事件

<div class = 'btn'>点我</div>
<script>
	$(function() {
  		$('.btn').on('click', function() {
          	alert('南屏晚钟');
      	})
	})
</script>

//绑定多个事件
<style>
	div{
		width: 200px;
		height: 200px;
		border: 1px solid plum;
		text-align: center;
	}
</style>
<div></div>
<script>
$(function() {
	$('div').on({
		mouseenter: function() {
			$(this).css('backgroundColor', 'skyblue');
		},
		mouseleave: function() {
			$(this).css('backgroundColor', '#ff2832')
		},
		click: function() {
			$(this).text('南屏晚钟').css('color', 'green');
		}
	})
})
</script>

//多个用空格分隔的事件类型
<style>
	div{
		width: 200px;
		height: 200px;
		background-color: red;
	}
	.btn{
		background-color: greenyellow;
	}
</style>
<div></div>
<script>
	$(function() {
		$('div').on('mouseenter mouseleave', function() {
			$(this).toggleClass('btn')
		})
	})
</script>

2. on() 可实现事件委托
   当你子元素有多个时，将子元素的事件绑定到父元素身上，就是将事件委托给父元素

<style>
	.parent{
		width: 200px;
		height: 200px;
		border: 1px solid
	}
	.child{
		width: 100px;
		height: 100px;
		border: 1px solid red;
		margin: 0 auto;
	}
</style>
<div class="parent">
	<div class="child"></div>
</div>
<script>
	$('.parent').on('click', '.child', function() { //绑定在parent类上，触发对象是在parent里的child类上
		alert('呀呀呀')
	})
</script>