jQuery 事宜用法详解

简介

jquery 之所以成为最受迎接的前端库，很大一部分是得益于它的事宜具有优越的语义，优异的兼容性，而且便于管理和扩大。

在这里我会引见 jquery 事宜的一些比较基本的用法。

完成道理

jquery 事宜脱胎于浏览器的 addEventListener (W3) 和 attachEvent (IE) 要领 , 供应了跨浏览器的一致性API。详细的完成道理能够参考Aaron的系列文章
jquery源码剖析-事宜。

事宜操纵

绑定事宜

jquery 中完成事宜绑定有多种体式格局,个中 $(selector).event(func) 体式格局中 event 支撑一系列的浏览器事宜，文档加载事宜，表单事宜，键盘事宜和鼠标事宜，但并不是悉数。

    // 经常运用的写法
    
    $('body').click(function(){ })
    
    $('body').on('click',function(){ })
    
    $('body').one('click',function(){ }) // 只会实行一次，然后烧毁事宜
    
    // 其他写法(不引荐)
    $('body').bind('click',function(){ })
    
    $('body').delegate('p','click',function(){ }
    

on.('click') 和 .click() 的区分。

on 属于 绑定事宜处置惩罚器(event-handler-attachment) , 而 .click() 属于 jquery包装好的鼠标事宜。

on 能够绑定dom和bom的既有事宜，也能够绑定自定义的事宜。所以引荐一直只运用$(selector).on(event,func) 的体式格局，弹性的绑定更多的事宜：

    $(document).hashchange(function(){ })// 报错，jquery没有供应此事宜处置惩罚器
    
    $(document).on('hashchange',function(){ })// 绑定事宜胜利
    

绑定多个事宜处置惩罚器

也能够同时绑定多个事宜处置惩罚统一事件：

    $('input').on('focus input',function(){ })// 在文本框聚焦和输入的时刻，都做一样的事变

或许是绑定多个事宜处置惩罚差别事件：

    $('input')
    .on('focus',function(){ })// 聚焦时处置惩罚 
    .on('blur',function(){ })// 落空中心时处置惩罚 
    .on('input',function(){ })// 输入时处置惩罚 
    

消除事宜

依据绑定事宜体式格局的差别，消除事宜也有好几种体式格局。
引荐一直运用 $(selector).off(event) 的体式格局消除事宜绑定，由于 on/off 恰好构成了一个开关。

    /* 
     * 能够消除 $.click(func),$.on('click',func)和 $.bind('click',func) 绑定的事宜，
     * 不能消除delegate体式格局绑定的事宜  
    */ 
    $('body').off('click') 
    
    // 同上
    $('body').unbind('click') 
    
    // 只能消除 delegate体式格局绑定的事宜
    $('body').undelegate('p','click')

触发事宜

在 jquery 中，有许多要领依据其参数个数的差别，既能够是赋值，也能够做为取值操纵。
事宜也不破例，许多时刻能够应用这个特征，替代手动去触发一些事宜，以下示例中的两种体式格局，都能够完成自动触发事宜。

    // (当表单字段未经由过程考证时) 自动选中文本值
    $('input').select()
    $('input').trigger('select')
    
    // 触发已有的点击事宜
    $(selector).click()
    $(selector).trigger('click')
    
    // 经由过程触发事宜，关照select2插件从新衬着
    $('select').change()
    $('select').trigger('change')

事宜托付

事宜托付经由过程事宜从目的元素冒泡到根元素的道理完成，它有2个优点，一是大幅下降事宜绑定的内存占用，二是能够对厥后到场的元素见效。

    // 写法
    $(selector).on(event, selector2, func)
    
    // 不引荐的要领
    $(selector).delagate(selector2, event, func)

事宜托付道理及机能剖析详见 解密jQuery事宜中心 – 托付设想（二）

事宜操纵进阶

上面列举了一些简朴的事宜绑定，解绑和托付的运用，下面会说到一些越发个性化的用法。

阻挠默许事宜

event.preventDefault() 这个要领用于阻挠浏览器的默许行动，通经常运用于表单提交或是页面转动。

    $('form').on('submit',function(event){
          
      // 阻挠了默许的表单提交事宜，下面能够做一些爱做的事变了
      event.preventDefault();
    })
    
    $(document).on('touchmove',function(event){
          
      // 阻挠了浏览器的默许转动，也能够做些爱做的事变了
      event.preventDefault();
    })

阻挠事宜流传

阻挠事宜流传即阻挠事宜继承向上冒泡。

    // 点击div时，会顺次alert 2 ,1
    $('body').on('click',function(){alert(1)})
    
    $('div').on('click',function(){alert(2)})
    
    // 下面的代码只会alert一个 2，由于事宜住手冒泡了,不会被body监听到
    $('body').on('click',function(){alert(1)})
    
    $('div').on('click',function(event){
       event.stopPropagation();
       alert(2)
    })

阻挠事宜向后实行

除了阻挠默许的事宜，住手向上冒泡以外，偶然还需要制止后续的事宜实行，能够运用 event.stopImmediatePropagation() 要领。该要领会自动挪用 event.stopPropagation() 要领。

    // 不运用 event.stopImmediatePropagation() 将会alert 2,3,4,1
    // 加上今后只会alert 2
    $('body').on('click',function(){alert(1)})
    
    $('div').on('click',function(event){
       event.stopImmediatePropagation();
       alert(2)
    })
    $('div').on('click',function(){
       alert(3)
    })
    $('div').on('click',function(){
       alert(4)
    })

定名空间

想要更精准的掌握事宜，许多时刻还需要应用 jquery 的定名空间机制。

    $('div').on('click.click1',function(){console.log(1)})
    $('input').on('click.click1',function(){console.log(11)})
    
    $('div').on('click.click2',function(){console.log(2)})
    $('input').on('click.click2',function(){console.log(21)})
    
    // 只触发click2事宜
    $('div,input').trigger('.click2')
    
    // 消除click1事宜,click2任然会实行
    $('div,input').off('.click1')

自定义事宜

把多个事宜组合起来，或许在特定条件下触发事宜，一般的事宜绑定是没法满足需要的，能够经由过程自定义事宜来构成 pub-sub 组合。
比方监听 短信考证码发送倒计时：

    // 伪代码
    
    setInterVal(function(){
      time--;
      if(time < 1){
        $('.js-timeless-button').trigger('time-end', params0, params1);
      }
    },1000)
    
    // 自定义事宜回调函数默许第一个参数为event对象，今后的参数顺次是传入的参数
    
     $('.js-timeless-button').on('time-end',function(event, params0, params1){
       
     });

或许是 页面转动到了底部

    // 伪代码
    
    $(window).on('scroll',function(){
      if((($(window).scrollTop() + $(window).height())) >= $(document).height()){
        $(document).trigger('infinite', params0, params1);  
      }
    })
    
     $(document).on('infinite',function(event, params0, params1){
       
     });

消除自定义事宜和消除其他事宜的体式格局雷同。能够经由过程 off 或许 unbind 举行。

事宜队列

在 jquery 中，事宜是根据其绑定递次顺次实行的。假如想要调解实行递次，或是制止之前绑定的要领发作，能够经由过程重写事宜队列的体式格局。

检察某个dom上已绑定事宜的要领是
$._data(elem,'events') (jquery版本>1.7)。

elem 是 dom对象 而非 jquery对象 。

    function alertBottle(){
      $("body").on('click',function() { alert("1") });
      $("body").on('click',function() { alert("2") });
      $("body").on('click',function() { alert("3") });
    }
    
    // 点击body会顺次alert 1, 2, 3
    alertBottle();
    
    // 倒序实行
    alertBottle();
    
    var Events = $._data($("body").get(0),'events');
    Events.click.sort(function(a,b){return b.guid-a.guid })   
    
    // 制止实行之前的统统， 只实行我
    alertBottle();
    
    var Events = $._data($("body").get(0),'events');
    Events.click = null;
    $("body").on('click',function() { alert("4") });
    
    // 最早实行我 alert 4, 1, 2, 3
    alertBottle();
    
    $("body").on('click',function() { alert("4") });
    var Events = $._data($("body").get(0),'events');
    var last = Events.click.pop();
    Events.click.unshift(last);

兼容jquery低版本的写法是:

    $.fn.getEvents = function() {
        if (typeof(jQuery._data) == 'function') {
            return jQuery._data(this.get(0), 'events') || {};
        } else if (typeof(this.data) == 'function') { // jQuery version < 1.7.?
            return this.data('events') || {};
        }
        return {};
    };
    
    // 运用
    $("body").getEvents();

参考资料：jquery中文文档