JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
浏览数：331 /
时间：2015年06月09日
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("mouseover mouseout", function (event) { 17 $(this).toggleClass("bg"); 18 }); 19 //unbind支持取消绑定事件 20 $("#child").unbind("mouseout"); 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("mouseover.test mouseout.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("mouseover mouseout", function (event) { 17 $(this).toggleClass("bg"); 18 }); 19 //off支持取消绑定事件 20 $("#child").off("mouseout"); 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)").bind("click", function (event, note) { 10 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡 11 //取消form表单提交或a打开的超连接 12 //event.preventDefault(); 13 //同样也支持取消(*)事件冒泡 14 event.stopPropagation();//通过A使用trigger之后，这里还可以使用取消事件冒泡的方法。 15 }); 16 $("a").bind("click", function (event) { 17 //取消form表单提交或a打开的超连接 18 event.preventDefault(); 19 //同样也支持取消(A)事件冒泡 20 event.stopPropagation(); 21 $("#button").trigger("click", ["通过a点击的click事件"]);//支持事件冒泡 22 }); 23 }); 24 function output(text) { 25 $("#content").append(text + "<br/>"); 26 } 27 </script> 28 </head> 29 <body id="body"> 30 <div id="parent"> 31 <div id="child"> 32 <a id="link" href="http://www.baidu.com">超连接（trigger）</a> 33 <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" /> 34 </div> 35 </div> 36 <div id="content"> 37 </div> 38 </body> 39 </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)").bind("click", function (event, note) { 10 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡 11 //取消form表单提交或a打开的超连接 12 //event.preventDefault(); 13 //同样也支持取消(*)事件冒泡 14 //event.stopPropagation();//通过A使用triggerHandler之后，这里可以不再使用阻止事件冒泡的方法。但是直接点button还是会出现事件冒泡 15 }); 16 $("a").bind("click", function (event) { 17 //取消form表单提交或a打开的超连接 18 event.preventDefault(); 19 //同样也支持取消(A)事件冒泡 20 event.stopPropagation();// 21 $("#button").triggerHandler("click", ["通过a点击的click事件"]);//阻止事件冒泡 22 }); 23 }); 24 function output(text) { 25 $("#content").append(text + "<br/>"); 26 } 27 </script> 28 </head> 29 <body id="body"> 30 <div id="parent"> 31 <div id="child"> 32 <a id="link" href="http://www.baidu.com">超连接（triggerHandler）</a> 33 <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" /> 34 </div> 35 </div> 36 <div id="content"> 37 </div> 38 </body> 39 </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
