jQuery 事件注册与实时事件

jQuery  高级事件注册

         jquery 已经成为许多前端开发的基础库，它的引入给前端开发节约了许多事件同时也在一定程度上提高了工作效率。今天一起讨论下jQuery 中大家都会用到的事件注册相关知识。 个人总结，如有错误欢迎指出，讨论。

          1.  Bind 方法  （与addEventListner 和  attachEvent 一样，绑定事件处理程序到指定文档元素）

            调用bind方法可以带有三个参数。第一个参数是事件类型（允许一次同时绑定多个事件，空格分隔即可），第三个参数是处理程序函数。在两者参数中间可以传入任何值，jQuery 会在调用处理程序前，将这里指定的值设置为Event对象的data属性。注：这种方式可传递额外的数据给处理程序，这个很有用。

           下面贴一段简单示例代码：

          

            第一行代码将会报错，通过事件调用的处理函数作用域已经发生改变

            第二行代码成功调用方法并输出信息到控制台

          

            2. one 方法

            调用one方法和bind一样，二者的工作原理也类似，除了在调用事件处理程序后会制动注销它。这意味着，使用one方法注册的事件处理器永远只会触发一次。

            3. $.proxy 方法

             该方法接受一个已有的函数，并返回带特定上下文的新函数。

              W3C： 该方法通常用于向上下文指定向不同对象的元素添加事件。

                           提示：如果调用重$.proxy返回的函数，jQuery 任然可通过传递的原先的函数取消绑定正确的函数。

              1中的示例我们可以修改成如下：

             mod={
                        _headler:function(e){
                        //下面的两个方法分别返回什么？
                         this._testF();
                          console.log(e.type);
                          },
                          _testF:function(){
                          console.log("在事件处理函数中调用成功！");
                        },
                        _event:function(){
                        var _this=this;
                       btn.bind("click",$.proxy(_this._headler,_this));
                      }
                      }

                     mod._event();

                    第一行代码能够 正常调用指定的方法。作用域切换成功

             4. 实时事件 （<1>使动态元素与老元素拥有相同的事件处理程序； <2> 依赖于事件冒泡）

                当事件冒泡到document对象时，它有可能已经传递给了很多静态事件处理程序。

              1） delegate 方法

                 通常在$(document) 上调用delegate方法。它会在document或window上注册一个内部处理程序。

                使用方法：

               //文档中动态更新的部分使用实时事件处理程序

                $(document).delegate("a","mouseover  mouseout",data,eventHandler);

                2)  live 方法

                在jQuery 对象上调用live方法时，该对象中的元素实际上并没有使用。真正有关系的是用来创建jQuery对象的选择器字符串和上下文对象。

                $("a",$(".dynamic")).live("mouseover",eventHandler);

                3) on 方法

                 该方法与上面两个略有不同，它是在被选元素及子元素上添加一个或多个事件处理程序（上面两个是通过绑定事件到document）。所以性能上要优于前两者。

                  使用方式上与前两个无大异。  注：on 方法可以接收一个对象参数，该对象的属性事件类型，属性值为事件处理函数。

                 示例代码：          

                 <1>.on( events [, selector ] [, data ], handler(eventObject) )

                  <2>官网：

                    

              

                     4） 通过die，undelegate 方法，注销实时事件处理程序

                       例：

                       $("a").die("mouseove");// 移除a元素上mouseover事件的所有实时处理程序

                       $("a").die("mouseover",linkHandler);//只移除一个指定的实时处理程序

                       

                        $(document).undelegate('a');// 同die

                        $(document).undelegate('a'， ‘mouseover’);// 移除mouseover 的实时处理程序

                        $(document).undelegate('a', 'mouseover', eventHandler);// 移除指定的实时处理程序