[TOC] # 2\. jQuery事件处理 ## 2.1事件处理on()绑定事件 on()方法在匹配元素上绑定一个或多 个事件的事件处理函数 语法: ~~~ element.on(events, [selector],fn) ~~~ 1. events:-个或多个用空格分隔的事件类型,如"click"或"keydown"。 2. selector:元素的子元素选择器。 3. fn:回调函数即绑定在元素身上的侦听函数。 ~~~ // 2.事件处理on $("div").on({ mouseenter: function() { $(this).css("background", "skyblue");}, click: function() { $(this). css("background", " purple");}, mouseleave: function() { $(this) .css("background", "blue"); } }); ~~~ ### on()方法优势1 : (绑定多个事件) 可以绑定多个事件,多个处理事件处理程序。 ~~~ $ ("div").on({ mouseover:function() {}, mouseout:function() {}, click:function() { } }) ; ~~~ 如果事件处理程序相同 ~~~ $ ("div").on (mouseover mouseout", function() { $ (this).toggleClass ("current") ; }) ; ~~~ ### on()方法优势2 : (事件委派操作) (重点) 可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。 ~~~ $('ul') .on('click', 'li', function () { alert('hello world!') ; }) ; ~~~ 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。 ### on0方法优势3 : (动态生成的元素绑定事件) 动态创建的元素, click()没有办法绑定事件，on()可以给动态生成的元素绑定事件 ~~~ // (3) on可以给未来动态创建的元素绑定事件 // $("ol li").click(function() { //alert(11); // }) $("ol").on("click"，"li", function() { alert(11); }) var li = $("<li>我是后来创建的</li>"); $("ol"). append(li); ~~~ ## 2.2事件处理off()**解绑事件** off()方法可以移除通过on(方法添加的事件处理程序。 ~~~ $("p").off() //解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件后面的foo是侦听函数名 $("ul").off ("click", "li"); // 解绑事件委托 ~~~ ## 只想触发一次 one() 如果有的事件只想触发一次，可以使用one()来绑定事件。  ## 2.3自动触发事件trigger() (轮播图 可重点) 有些事件希望自动触发比如轮播图自动播放功能跟点击右侧按钮一致。 可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。 ~~~ element.click() // 第一种简写形式 ~~~ `element.trigger ("type") //第二种自动触发模式` ~~~ $("p").on("click", function () { alert ("hi~") ; }) ; $("p").trigger("click"); //此时自动触发点击事件,不需要鼠标点击 ~~~ `element.triggerHandler(type) // 第三种自动触发模式`就是不会触发元素的默认行为 # 案例:发布微博案例   html  ## 案例分析 :发布微博案例 ~~~ ①点击发布按钮，动态创建一个小i ,放入文本框的内容和删除按钮,并且添加到ul中。 ②点击的删除按钮,可以删除当前的微博留言。 ~~~ ## 代码实验 ~~~ <script> $(function() { ~~~ // 1.点击发布按钮，动态创建一个小li,放入文本框的内容和删除按钮，并且添加到ul中 ~~~ $(" . btn").on("click", function() { var li = $("<li></li>"); li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>"); $("u1").prepend(1i); li. slideDown( ); $(" .txt").val(""); }) ~~~ // 2.点击的删除按钮，可以删除当前的微博留言1i ~~~ // $("ul a"). click( function() { //此时的click不能给动态创建的a添加事件 alert(11); // }) // on可 以给动态创建的元素绑定事件 $("ul" ).on("click", "a", function() { $(this). parent(). slideUp(function() { $(this).remove(); }); }) ~~~