JavaScript:事件绑定与监听

事件绑定与监听

       事件是JavaScript应用程序的核心，是所有内容的驱动。

• 事件的绑定与解绑

       事件的实现在主流浏览器之间存在较大差异，但是了解事件的机制仍然非常重要，以W3C中的事件模型作为研究对象。

      1.  事件监听的绑定函数：

           函数签名：addEventListener(eventType, callback, useCapture)

           参数说明：eventType：事件类型，例如：click、blur等

                             callback：事件被触发时执行这个函数

                             useCapture：事件传播机制：如果为true时，事件处理程序以捕捉（capturing）模式触发，反之，事件处理

                                                   以冒泡模式触发，可以使用event对象中的stopPropagation()函数终止冒泡。

            通过调用event对象的preventDefault()函数来阻止默认行为，同样也可以通过在回调中返回false来实现同样的效果。

      2.事件监听的解绑函数：

            函数签名：removeEventListener(eventType, callbackListenerl)

            参数说明：eventType：移除事件的类型，例如：click、blur等；如果监听的函数是匿名函数，没有任何引用指向它，在

                               不销毁目标元素的前提下，这个监听是无法被移除的。

事件库

              处理众多浏览器的差异性需要借助第三方JavaScript类库来支持，例如：jQuery、MooTools、YUI等。

          jQuery的API提供了bind()函数来跨浏览器绑定事件监听，传人事件名称和回调函数，例如：

      jQuery('#elementId').bind(eventName, handler);还提供了快捷方式：jQuery('#elementId').click(callback);

      需要保证DOM元素存在并被已被加载。

            

切换上下文

             new function(){

                 this.appName = 'ucfpay';

                 document.body.addEventListener('click', function(event){

                    // 上下文发生改变，因此appName是undefined

                    alert(this.appName);

                 }, false);

              };

          要想保持原有的上下文，需要将回调函数包装进一个匿名函数，然后定义一个引用指向它。

      使用代理函数来保持当前的上下文。jQuery中提供了proxy()函数，只需将指定的上下文传人函数即可：

      $('signinForm').submit($.proxy(function(){/* ... */}), this);

委托事件

              从事件冒泡时开始就发生了事件委托，我们可以直接给父元素绑定事件监听，用来检测在其子元素内

      发生的事件，用来建设应用

      中的事件监听的数量：

              // 在ul列表上座了事件委托

              list.addEventListener('click', function(e){

                if (e.currentTarget.tagName == 'li'){

                  /* ... */

                 return alse;

                }

              }, false);

              jQuery提供了delegate()函数，可以减少事件监听的数量，改善代码性能：

              $('ul li').click(function(){/* ... */});

              $('ul').delegate('li','click',function(){/* ... */}); // 事件委托，所有为元素添加的子元素都具有事件监听。

自定义事件

            jQuery中可以使用trigger()函数来触发自定义事件。可以通过命名空间形式来管理事件名称。

         // 绑定自定义事件

         $('.className').bind('refresh.widget', function(){});

              

         // 触发自定义事件
         $('.className').trigger('refresh.widget');
         通过给trigger()传人一个额外的参数来给事件处理程序传人数据。数据会员附加参数的形式带人回调：
         $('.class').bind('frob.widget', function(event, dataNumber){
              console.log(dataNumber);
         });
         $('.class').trigger('frob.widget', 5);

         和内置事件一样，自定义事件同样会沿着DOM树做冒泡。

自定义事件和jQuery插件

DOM无关事件