jquery事件处理on学习笔记
【语法】
element.on(events,[selector],fn)
1、events一个或多个用空格隔开的事件类型，如“click”或“click keydown”
2、selector：元素的子元素选择器。如ul里面的li
3、fn：回调函数，即绑定在元素身上的倾听函数
作用一：绑定一个或多个处理事件处理程序
<body> <div></div> </body>
情况1：绑定多个事件，且事件的处理程序不同（以对象的形式书写）
<script> $(function() { $("div").on({ mouseenter: function() { $(this).css("background", "skyblue"); }, click: function() { $(this).css("background", "purple"); }, mouseleave: function() { $(this).css("background", "blue") } }) }) </script>
情况2：绑定多个事件，事件的处理程序相同，多个事件之间用空格隔开
<script> $(function() { $("div").on("mouseenter mouseleave", function() { //鼠标经过加上current类，鼠标离开去掉current类 $(this).toggleClass("current"); }) }) </script>
作用二：实现事件委托
$("ul li").click(function() {
……
})
问题：利用隐式迭代，给每一个小li都绑定了一个点击click事件，略显麻烦改进如下：
$("ul").on("click","li",function(){
……
})
解决方案：利用on()只用给父元素ul绑定的点击click事件，但注意触发的对象是ul的孩子小li，只有点击了li才会触发事件。当点击了li会产生事件冒泡，此时就会触发父亲ul里面的点击click事件
作用三：on()可以给未来动态生成的元素绑定事件（利用到了上述的事件委托）
<body> <ul></ul> </body>
问题：单个注册事件无法实现给“动态创建的元素”绑定事件，
<script> $(function() { $("ul li").click(function() { alert("绑定成功！"); }) //单个注册事件，不能给如下后来新创建小li绑定该click事件 var li = $("<li>我是后来创建的</li>"); $("ul").append(li); }) </script>
解决方案：采用on可以给未来动态创建的小li绑定事件
<script> $(function() { $("ul").on("click", "li", function() { alert("绑定成功！") }); // on()利用可以实现事件委托这一特性，可以给动态创建的元素绑定事件 var li = $("<li>我是后来创建的</li>"); $("ul").append(li); }) </script>
