首页 > 代码库 > JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
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="http://www.mamicode.com/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="http://www.mamicode.com/submit（第一次点击执行click事件，第二次点击提交表单）" />30 </form>31 </div>32 </div>33 <input type="button" id="one" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/submit（每次点击执行click事件）" />30 </form>31 </div>32 </div>33 <input type="button" id="bind" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/button（通过a的click事件执行button的click事件）" />34 </div>35 </div>36 <div id="content">37 </div>38 </body>39 </html>
JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。