JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别

时间：2023-03-09 00:30:45
JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别

JQuery事件one，支持参数

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件one，支持参数</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $("*").each(function (index, item) {

                 $(item).one("click", { name: "wyp", age: 33 }, function (event) {

                     output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡

                     //取消form表单提交或a打开的超连接

                     event.preventDefault();

                     //同样也支持取消事件冒泡

                     //event.stopPropagation();

                 });

             });

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             <a id="link" href="http://www.baidu.com">超连接（第一次点击执行click事件，第二次点击打开超链接）</a>

             <form id="form" action="http://www.baidu.com">

                 <input id="submit" type="submit" value="submit（第一次点击执行click事件，第二次点击提交表单）" />

             </form>

         </div>

     </div>

     <input type="button" id="one" value="one（只执行一次click事件）" />

     <div id="content">

     </div>

 </body>

 </html>

jquery_event06_one

JQuery事件bind，支持参数

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件bind，支持参数</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $("*").each(function (index, item) {

                 $(item).bind("click", { name: "wyp", age: 33 }, function (event) {

                     output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + ",参数name=" + event.data.name + ",age=" + event.data.age);//DOM2会产生冒泡

                     //取消form表单提交或a打开的超连接

                     event.preventDefault();

                     //同样也支持取消事件冒泡

                     //event.stopPropagation();

                 });

             });

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             <a id="link" href="http://www.baidu.com">超连接（每次点击都执行click事件）</a>

             <form id="form" action="http://www.baidu.com">

                 <input id="submit" type="submit" value="submit（每次点击执行click事件）" />

             </form>

         </div>

     </div>

     <input type="button" id="bind" value="bind（每次点击都执行click事件）" />

     <div id="content">

     </div>

 </body>

 </html>

jquery_event07_bind

JQuery事件bind-unbind，支持绑定和取消绑定多个事件

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件</title>

     <style>

         .bg{

             background-color:yellow;

             color:blue;

         }

     </style>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //bind支持绑定多个事件

             $("#child").bind("mouseenter mouseleave", function (event) {

                 $(this).toggleClass("bg");

             });

             //unbind支持取消绑定事件

             $("#child").unbind("mouseleave");

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             鼠标经过这里

         </div>

     </div>

     <div id="content">

     </div>

 </body>

 </html>

jquery_event08_bind_unbind

JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件bind-unbind，支持绑定和取消绑定多个事件（使用命名空间取消绑定）</title>

     <style>

         .bg{

             background-color:yellow;

             color:blue;

         }

     </style>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //bind支持命名空间的方式绑定事件

             $("#child").bind("mouseenter.test mouseleave.test", function (event) {

                 $(this).toggleClass("bg");

             });

             //unbind支持通过命名空间的方式取消绑定事件

             $("#child").unbind(".test");

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             鼠标经过这里

         </div>

     </div>

     <div id="content">

     </div>

 </body>

 </html>

jquery_event09_bind_unbind_namespace

JQuery事件bind不支持动态添加html的事件绑定

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件bind不支持动态添加html的事件绑定</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $(".child").bind("click", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持bind事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

 </body>

 </html>

jquery_event10_bind_problem

JQuery事件live支持动态添加html的事件绑定

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件live支持动态添加html的事件绑定</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $(".child").live("click", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

 </body>

 </html>

jquery_event11_live_solution_bind_problem

JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件bind也想支持动态添加html的事件绑定,需要使用closest实现和live一样的事件</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $("#content").bind("click", function (event) {

                 //closest从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。如果自己满足就返回，如果自己不满足，继续向上找。

                 var obj = $(event.target).closest(".child");

                 if (obj[0] == event.target) {

                     window.alert($(event.target).html());

                 }

                 /*

                     对于live而言就是使用事件委派的方式，但是使用这个方式会带来如下问题：每个事件都会冒泡到content上面去，而且还会继续往上冒泡，开销变大

                 */

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

 </body>

 </html>

jquery_event12_bind_solution_bind_problem

JQuery事件live支持动态添加html的事件绑定

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件live支持动态添加html的事件绑定</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $(".child").live("click", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

     <div id="other">

         <div class="child">333333</div>

     </div>

 </body>

 </html>

jquery_event13_live_problem

JQuery事件live支持动态添加html的事件绑定，使用上下文参数

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件live支持动态添加html的事件绑定，使用上下文参数</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。

             $(".child", "#content").live("click", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

     <div id="other">

         <div class="child">333333</div>

     </div>

 </body>

 </html>

jquery_event14_live_solution_context

JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件delegate支持动态添加html的事件绑定，替换live加context方式</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //如何只给content下面的child添加click事件，而不是全部，解决方法是添加上下文参数。

             $("#content").delegate(".child", "click", function (event) {

                 window.alert($(this).html());

             });

             //替换live的写法

             //$(".child", "#content").live("click", function (event) {

             //    window.alert($(this).html());

             //});

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

     <div id="other">

         <div class="child">333333</div>

     </div>

 </body>

 </html>

jquery_event15_delegate_replace_live

JQuery事件on动态添加html不支持事件绑定，等同于bind

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件on动态添加html不支持事件绑定，等同于bind</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $(".child").on("click", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，不支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

     <div id="other">

         <div class="child">333333</div>

     </div>

 </body>

 </html>

jquery_event16_on_replace_bind

JQuery事件on支持动态添加html事件绑定

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件on支持动态添加html事件绑定</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             $("#content").on("click",".child", function (event) {

                 window.alert($(this).html());

             });

             $("#content").append("<div class='child'>222222</div>");//动态填加html元素，支持click事件。

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="content">

         <div class="child">111111</div>

     </div>

     <div id="other">

         <div class="child">333333</div>

     </div>

 </body>

 </html>

jquery_event17_on_solution_context

JQuery事件on-off，支持绑定和取消绑定多个事件

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件on-off，支持绑定和取消绑定多个事件</title>

     <style>

         .bg{

             background-color:yellow;

             color:blue;

         }

     </style>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //on支持绑定多个事件

             $("#child").on("mouseenter mouseleave", function (event) {

                 $(this).toggleClass("bg");

             });

             //off支持取消绑定事件

             $("#child").off("mouseleave");

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             鼠标经过这里

         </div>

     </div>

     <div id="content">

     </div>

 </body>

 </html>

jquery_event18_off_relace_unbind

JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件trigger，可以通过trigger传递参数，支持事件冒泡</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //$("*").not("a")

             //$("*:not(a)")

             //$("*").filter(":not(a)")

             //以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件

             $("*").not("a").bind("click", function (event, note) {

                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡

                 //取消form表单提交或a打开的超连接

                 //event.preventDefault();

                 //同样也支持取消(*)事件冒泡

                 //event.stopPropagation();//通过A使用trigger之后，这里还可以使用取消事件冒泡的方法。

             });

             $("a").bind("click", function (event) {

                 //取消form表单提交或a打开的超连接

                 event.preventDefault();

                 //同样也支持取消(A)事件冒泡

                 event.stopPropagation();

                 $("#button").trigger("click", ["通过a点击的click事件"]);//支持事件冒泡

             });

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             <a id="link" href="http://www.baidu.com">超连接（trigger）</a>

             <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />

         </div>

     </div>

     <div id="content">

     </div>

 </body>

 </html>

jquery_event19_trigger

JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>JQuery事件triggerHandler，可以通过triggerHandler传递参数，阻止事件冒泡</title>

     <script src="/js/jquery-1.8.2.js"></script>

     <script language="javascript" type="text/javascript">

         $(function () {

             //$("*").not("a")

             //$("*:not(a)")

             //$("*").filter(":not(a)")

             //以上三种写法都没有给a增加click事件,但是bind事件会产生事件路由,即使下面的function中加上了event.stopPropagation();也不能解决第一次点击a之后执行click事件

             $("*:not(a)").bind("click", function (event, note) {

                 output("事件源:" + event.target.id + "," + event.target.tagName + ",事件对象：" + event.currentTarget.id + "，note参数：" + note);//DOM2会产生冒泡

                 //取消form表单提交或a打开的超连接

                 //event.preventDefault();

                 //同样也支持取消(*)事件冒泡

                 //event.stopPropagation();//通过A使用triggerHandler之后，这里可以不再使用阻止事件冒泡的方法。但是直接点button还是会出现事件冒泡

             });

             $("a").bind("click", function (event) {

                 //取消form表单提交或a打开的超连接

                 event.preventDefault();

                 //同样也支持取消(A)事件冒泡

                 event.stopPropagation();//

                 $("#button").triggerHandler("click", ["通过a点击的click事件"]);//阻止事件冒泡

             });

         });

         function output(text) {

             $("#content").append(text + "<br/>");

         }

     </script>

 </head>

 <body id="body">

     <div id="parent">

         <div id="child">

             <a id="link" href="http://www.baidu.com">超连接（triggerHandler）</a>

             <input type="button" id="button" value="button（通过a的click事件执行button的click事件）" />

         </div>

     </div>

     <div id="content">

     </div>

 </body>

 </html>

jquery_event20_triggerHandler

相关文章