jQuery：事件注册和事件处理(on()绑定事件)

jQuery单个事件主侧比较麻烦，如果要给一个元素添加点击和鼠标经过事件，需要我们写两个事件：click和mousemove。

而在jQuery中给我们进行了处理，有一个新的事件：on()绑定事件

on()方法在匹配元素上，可以绑定一个或多个事件的事件处理函数。
语法格式：

element.on(events,[selector],fn);

参数：

1. events：一个或多个用空格隔开的事件类型，如click、mouseenter，里面也可以是对象
2. selector：元素的子元素选择器，比如element是ul，那么selector可以选择li
3. fn：回调函数

简单代码示例：

<div class="car">
 	123
</div>
<script>
$(function(){
// 因为用到了多个事件，所在这里的events传了一个对象，和object使用方法一致
	$(".car").on({
	mouseenter:function(){
		$(this).css("color","skyblue");
	},
	click:function(){
		$(this).css("color","red");
	},
	mouseleave:function(){
		$(this).css("color","green");
	}
	})
// 如果恰巧事件处理是一样的，可以用空格隔开
	$(".car").on("mouseenter mouseleave",function(){
		$(this).toggleClass("current");
	})
})
</script>

on()方法绑定优势1：
可以事件委派操作，就是把原来给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
代码示例：
解释：on()事件是绑定了在父亲ul的身上，但触发的对象是li，当点击了li，因为有事件冒泡，会冒泡的父亲ul身上，而父亲身上有一个点击事件，因此会输出11。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
$(function(){
	// 原始给li添加单击事件
	$("ul li").click(function(){
		console.log(1);
	})
	// 用on()添加单单击事件
	$("ul").on("click","li",function(){
		console.log(11);
	})
})
</script>

on()方法绑定优势2：
我们后面动态创建的元素，click()是没有办法绑定事件的，而on()可以给动态生成的元素绑定事件。
代码示例：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
$(function(){
	// 用原始的click()方法，无法给未来动态创建的li绑定事件
	$("ul li").click(function(){
		console.log(1);
	})
	// 用on()方法，可以给未来创建的li绑定事件
	$("ul").on("click","li",function(){
		console.log(11);
	})
	// 动态创建一个li，并添加给ul
	var li = $("<li>我是动态创建的li</li>");
	$("ul").append(li);
})
</script>