jQuery事件

系统 1898 0

1. 在页面加载后执行任务

    1.1 代码执行的时机选择

          $('document').ready() 指页面的DOM加载完成后执行、并不意味着关联的文件都下载完毕

          window.onload 指页面上所有元素都加载完成后执行

    1.2 基于一个页面执行多个脚本

          $('document').ready() 可以向内部的行为队列中添加函数、并按照添加的次序执行

    1.3 缩短代码的简写方式:$()函数

          1) 当不传递参数给它时、默认传递了document参数

               示例:

                $(document).ready(function(){

                   //todo;

                });

                简写成

                $().ready(function(){

                   //todo;

                });

           2) 当传递另一个函数作为参数时、$()会隐含对.ready()调用一次

               示例:

               上面的代码可简写成:

               $(function(){

                 //todo;

               });

2. 简单的事件:jQuery将DOM元素与事件绑定分离

    2.1 bind('事件',函数); 为元素事件绑定函数。

          $('#switch-large').bind('click', function(){

             //todo;

          }); 

    2.2 $(this):this引用的是DOM元素而不是jQuery对象。

                       该方法表示为this引用的相应元素创建一个jQuery对象。

    2.3 removeClass('参数'):当参数省略时表示移除所有的类。

    2.4 简写的事件:

          示例:

          .bind('click',function(){

            //todo

          })

          等同于

          .click(function(){

            //todo

          })

3. 复合事件

    jQuery中的多数事件处理方法都会直接响应JavaScript的本地方法、如click方法。

    但是也有少数处于跨浏览器优化和方便性考虑而添加的自定义处理程序。如.ready();

    .toggle();.hover();他们被称为复合事件。

    3.1 .toggle(arg1 arg2)方法

          1)说明:该方法接受两个函数作为参数,第一次在元素上单击调用第一个函数,第二次第二个,

                      以后交替执行。

          2)可使用.toggleClass('className')代替。

          3)示例:

             $(document).ready(

                function(){

                   $('#switcher h3').toggle(
                      function(){
                         $('#switcher .button').addClass('hidden');
                      },
                      function(){
                         $('#switcher .button').removeClass('hidden');  
                      });
                 });

               可替换为

              $(document).ready(
                  function(){
                     $('#switcher h3').bind('click',
                        function(){
                           $('#switcher .button').toggleClass('hidden');
                         });
                  });

    3.2 .hover(arg1,arg2)方法

          1)说明:该方法接收连个函数参数,第一个在鼠标进入元素时执行,第二个

                      在鼠标离开元素时执行。

          2)示例:

             $(document).ready(
                function(){
                   $('#switcher .button').hover(
                       function(){
                          $(this).addClass('hover');  
                       },
                       function(){
                          $(this).removeClass('hover');
                       }
                   );
                }
              );

     3.3 事件的旅程

           1)事件捕获(Netscape)

              jQuery事件

           2)事件冒泡(Microsoft)

              jQuery事件

           3)为了跨浏览器的一致性,jQuery始终会在模型的冒泡阶段注册事件处理程序

              因此,我们总是可以假定最具体的元素首先获得响应事件的机会。

           4)事件冒泡的副作用:子元素的行为传播给了父元素。

     3.4 限制和终止事件:从时间(阻止事件在某个时间发送)和空间(阻止事件被传播到某些元素)上限制

           1)阻止事件冒泡

              (1)指定事件目标(空间)

                   A)事件对象:是一种js的结构,它会在元素获得处理事件的机会时被传递给相应的事件处理程序。

                   B)示例:

                      $(document).ready(
                         function(){
                            $('#switcher').click(
                               function(event){
                                  if(event.target==this){
                                    $('#switcher .button').toggleClass('hidden');
                                  }
                         });
                     });

              (2)停止事件传播(时间)

                   A) .stopPropagation()方法:该方法可以完全阻止事件冒泡

                   B)示例:

                      $(document).ready(
                          function(){
                             $('#switcher .button').click(
                                function(event){
                                   $('body').removeClass();
                                      if(this.id=='switcher-narrow'){
                                        $('body').addClass('narrow');
                                      }else if(this.id=='switcher-larger'){
                                        $('body').addClass('large');
                                      }
                                   $('#switcher .button').removeClass('selected');
                                   $(this).addClass('selected');
                                   event.stopPropagation();
                                });
                           });

               (3)默认操作:像锚元素有默认的链接操作,这些操作不属于事件传播。要阻止默认操作需使用

                                  .preventDefault()方法

               (4)事件传播和默认操作

                   他们是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。如果想要同时停止事件传播

                   和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和

                   .preventDefault()的一种简写方式。

               (5)移除事件

                   A) .unbind('event' function) :移除绑定的函数

                   B).one('event' function) :绑定函数执行一次就移除  

         3.5 模拟用户操作

               .trigger('event')  :js自己触发事件。                         
              

   

   

jQuery事件


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论