JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
JQuery事件one，支持参数
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件one，支持参数</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $("*").each(function (index, item) { 10 $(item).one("click", { name: "wyp", age: 33 }, function (event) { 11 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡 12 //取消form表单提交或a打开的超连接 13 event.preventDefault(); 14 //同样也支持取消事件冒泡 15 //event.stopPropagation(); 16 }); 17 }); 18 }); 19 function output(text) { 20 $("#content").append(text + "<br/>"); 21 } 22 </script> 23 </head> 24 <body id="body"> 25 <div id="parent"> 26 <div id="child"> 27 <a id="link" href="http://www.baidu.com">超连接（第一次点击执行click事件，第二次点击打开超链接）</a> 28 <form id="form" action="http://www.baidu.com"> 29 <input id="submit" type="submit" value="submit（第一次点击执行click事件，第二次点击提交表单）" /> 30 </form> 31 </div> 32 </div> 33 <input type="button" id="one" value="one（只执行一次click事件）" /> 34 <div id="content"> 35 </div> 36 </body> 37 </html>
JQuery事件bind，支持参数
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件bind，支持参数</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $("*").each(function (index, item) { 10 $(item).bind("click", { name: "wyp", age: 33 }, function (event) { 11 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡 12 //取消form表单提交或a打开的超连接 13 event.preventDefault(); 14 //同样也支持取消事件冒泡 15 //event.stopPropagation(); 16 }); 17 }); 18 }); 19 function output(text) { 20 $("#content").append(text + "<br/>"); 21 } 22 </script> 23 </head> 24 <body id="body"> 25 <div id="parent"> 26 <div id="child"> 27 <a id="link" href="http://www.baidu.com">超连接（每次点击都执行click事件）</a> 28 <form id="form" action="http://www.baidu.com"> 29 <input id="submit" type="submit" value="submit（每次点击执行click事件）" /> 30 </form> 31 </div> 32 </div> 33 <input type="button" id="bind" value="bind（每次点击都执行click事件）" /> 34 <div id="content"> 35 </div> 36 </body> 37 </html>
JQuery事件bind-unbind，支持绑定和取消绑定多个事件
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件</title> 6 <style> 7 .bg{ 8 background-color:yellow; 9 color:blue; 10 } 11 </style> 12 <script src="/js/jquery-1.8.2.js"></script> 13 <script language="javascript" type="text/javascript"> 14 $(function () { 15 //bind支持绑定多个事件 16 $("#child").bind("mouseenter mouseleave", function (event) { 17 $(this).toggleClass("bg"); 18 }); 19 //unbind支持取消绑定事件 20 $("#child").unbind("mouseleave"); 21 }); 22 function output(text) { 23 $("#content").append(text + "<br/>"); 24 } 25 </script> 26 </head> 27 <body id="body"> 28 <div id="parent"> 29 <div id="child"> 30 鼠标经过这里 31 </div> 32 </div> 33 <div id="content"> 34 </div> 35 </body> 36 </html>
JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）</title> 6 <style> 7 .bg{ 8 background-color:yellow; 9 color:blue; 10 } 11 </style> 12 <script src="/js/jquery-1.8.2.js"></script> 13 <script language="javascript" type="text/javascript"> 14 $(function () { 15 //bind支持命名空间的方式绑定事件 16 $("#child").bind("mouseenter.test mouseleave.test", function (event) { 17 $(this).toggleClass("bg"); 18 }); 19 //unbind支持通过命名空间的方式取消绑定事件 20 $("#child").unbind(".test"); 21 }); 22 function output(text) { 23 $("#content").append(text + "<br/>"); 24 } 25 </script> 26 </head> 27 <body id="body"> 28 <div id="parent"> 29 <div id="child"> 30 鼠标经过这里 31 </div> 32 </div> 33 <div id="content"> 34 </div> 35 </body> 36 </html>
JQuery事件bind不支持动态添加html的事件绑定
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件bind不支持动态添加html的事件绑定</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $(".child").bind("click", function (event) { 10 window.alert($(this).html()); 11 }); 12 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持bind事件。 13 }); 14 function output(text) { 15 $("#content").append(text + "<br/>"); 16 } 17 </script> 18 </head> 19 <body id="body"> 20 <div id="content"> 21 <div class="child">111111</div> 22 </div> 23 </body> 24 </html>
JQuery事件live支持动态添加html的事件绑定
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件live支持动态添加html的事件绑定</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $(".child").live("click", function (event) { 10 window.alert($(this).html()); 11 }); 12 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 13 }); 14 function output(text) { 15 $("#content").append(text + "<br/>"); 16 } 17 </script> 18 </head> 19 <body id="body"> 20 <div id="content"> 21 <div class="child">111111</div> 22 </div> 23 </body> 24 </html>
JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $("#content").bind("click", function (event) { 10 //closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。如果自己满足就返回，如果自己不满足，继续向上找。 11 var obj = $(event.target).closest(".child"); 12 if (obj[0] == event.target) { 13 window.alert($(event.target).html()); 14 } 15 /* 16 对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题：每个事件都会冒泡到content上面去，而且还会继续往上冒泡，开销变大 17 */ 18 19 }); 20 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 21 }); 22 function output(text) { 23 $("#content").append(text + "<br/>"); 24 } 25 </script> 26 </head> 27 <body id="body"> 28 <div id="content"> 29 <div class="child">111111</div> 30 </div> 31 </body> 32 </html>
JQuery事件live支持动态添加html的事件绑定
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件live支持动态添加html的事件绑定</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $(".child").live("click", function (event) { 10 window.alert($(this).html()); 11 }); 12 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 13 //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。 14 }); 15 function output(text) { 16 $("#content").append(text + "<br/>"); 17 } 18 </script> 19 </head> 20 <body id="body"> 21 <div id="content"> 22 <div class="child">111111</div> 23 </div> 24 <div id="other"> 25 <div class="child">333333</div> 26 </div> 27 </body> 28 </html>
JQuery事件live支持动态添加html的事件绑定，使用上下文参数
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件live支持动态添加html的事件绑定，使用上下文参数</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。 10 $(".child", "#content").live("click", function (event) { 11 window.alert($(this).html()); 12 }); 13 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 14 }); 15 function output(text) { 16 $("#content").append(text + "<br/>"); 17 } 18 </script> 19 </head> 20 <body id="body"> 21 <div id="content"> 22 <div class="child">111111</div> 23 </div> 24 <div id="other"> 25 <div class="child">333333</div> 26 </div> 27 </body> 28 </html>
JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。 10 $("#content").delegate(".child", "click", function (event) { 11 window.alert($(this).html()); 12 }); 13 //替换live的写法 14 //$(".child", "#content").live("click", function (event) { 15 // window.alert($(this).html()); 16 //}); 17 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 18 }); 19 function output(text) { 20 $("#content").append(text + "<br/>"); 21 } 22 </script> 23 </head> 24 <body id="body"> 25 <div id="content"> 26 <div class="child">111111</div> 27 </div> 28 <div id="other"> 29 <div class="child">333333</div> 30 </div> 31 </body> 32 </html>
JQuery事件on动态添加html不支持事件绑定，等同于bind
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件on动态添加html不支持事件绑定，等同于bind</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $(".child").on("click", function (event) { 10 window.alert($(this).html()); 11 }); 12 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持click事件。 13 }); 14 function output(text) { 15 $("#content").append(text + "<br/>"); 16 } 17 </script> 18 </head> 19 <body id="body"> 20 <div id="content"> 21 <div class="child">111111</div> 22 </div> 23 <div id="other"> 24 <div class="child">333333</div> 25 </div> 26 </body> 27 </html>
JQuery事件on支持动态添加html事件绑定
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件on支持动态添加html事件绑定</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 $("#content").on("click",".child", function (event) { 10 window.alert($(this).html()); 11 }); 12 $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。 13 }); 14 function output(text) { 15 $("#content").append(text + "<br/>"); 16 } 17 </script> 18 </head> 19 <body id="body"> 20 <div id="content"> 21 <div class="child">111111</div> 22 </div> 23 <div id="other"> 24 <div class="child">333333</div> 25 </div> 26 </body> 27 </html>
JQuery事件on-off，支持绑定和取消绑定多个事件
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件on-off，支持绑定和取消绑定多个事件</title> 6 <style> 7 .bg{ 8 background-color:yellow; 9 color:blue; 10 } 11 </style> 12 <script src="/js/jquery-1.8.2.js"></script> 13 <script language="javascript" type="text/javascript"> 14 $(function () { 15 //on支持绑定多个事件 16 $("#child").on("mouseenter mouseleave", function (event) { 17 $(this).toggleClass("bg"); 18 }); 19 //off支持取消绑定事件 20 $("#child").off("mouseleave"); 21 }); 22 function output(text) { 23 $("#content").append(text + "<br/>"); 24 } 25 </script> 26 </head> 27 <body id="body"> 28 <div id="parent"> 29 <div id="child"> 30 鼠标经过这里 31 </div> 32 </div> 33 <div id="content"> 34 </div> 35 </body> 36 </html>
JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 //$("*").not("a") 10 //$("*:not(a)") 11 //$("*").filter(":not(a)") 12 //以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件 13 $("*").not("a").bind("click", function (event, note) { 14 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡 15 //取消form表单提交或a打开的超连接 16 //event.preventDefault(); 17 //同样也支持取消(*)事件冒泡 18 //event.stopPropagation();//通过A使用trigger之后，这里还可以使用取消事件冒泡的方法。 19 }); 20 21 $("a").bind("click", function (event) { 22 //取消form表单提交或a打开的超连接 23 event.preventDefault(); 24 //同样也支持取消(A)事件冒泡 25 event.stopPropagation(); 26 $("#button").trigger("click", ["通过a点击的click事件"]);//支持事件冒泡 27 }); 28 }); 29 function output(text) { 30 $("#content").append(text + "<br/>"); 31 } 32 </script> 33 </head> 34 <body id="body"> 35 <div id="parent"> 36 <div id="child"> 37 <a id="link" href="http://www.baidu.com">超连接（trigger）</a> 38 <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" /> 39 </div> 40 </div> 41 <div id="content"> 42 </div> 43 </body> 44 </html>
JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡</title> 6 <script src="/js/jquery-1.8.2.js"></script> 7 <script language="javascript" type="text/javascript"> 8 $(function () { 9 //$("*").not("a") 10 //$("*:not(a)") 11 //$("*").filter(":not(a)") 12 //以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件 13 $("*:not(a)").bind("click", function (event, note) { 14 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡 15 //取消form表单提交或a打开的超连接 16 //event.preventDefault(); 17 //同样也支持取消(*)事件冒泡 18 //event.stopPropagation();//通过A使用triggerHandler之后，这里可以不再使用阻止事件冒泡的方法。但是直接点button还是会出现事件冒泡 19 }); 20 $("a").bind("click", function (event) { 21 //取消form表单提交或a打开的超连接 22 event.preventDefault(); 23 //同样也支持取消(A)事件冒泡 24 event.stopPropagation();// 25 $("#button").triggerHandler("click", ["通过a点击的click事件"]);//阻止事件冒泡 26 }); 27 }); 28 function output(text) { 29 $("#content").append(text + "<br/>"); 30 } 31 </script> 32 </head> 33 <body id="body"> 34 <div id="parent"> 35 <div id="child"> 36 <a id="link" href="http://www.baidu.com">超连接（triggerHandler）</a> 37 <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" /> 38 </div> 39 </div> 40 <div id="content"> 41 </div> 42 </body> 43 </html>
