jQuery取消绑定事件 单个事件 单个函数

jQuery取消绑定特定事件函数

开发中会遇到很多某一个事件被重复绑定的情况，记录一下解决方法，也是 off() 函数的使用说明

off(): 取消 on() 函数为元素绑定的事件

假设有如下三个函数

function a() {}
function b() {}
function c() {}

• 1.取消全部事件

  • 无参数直接使用off()，无论绑定了多少种类的事件，每个事件上绑定了多少个函数，一次性全部取消
  • 无差别攻击

  $(selector).on('click', a);
  $(selector).on('change', b);
  $(selector).on('blur', c);
  
  // 直接取消全部事件
  $(selector).off();
  

• 2.取消指定事件

  • 参数中指定事件种类，取消该种类型事件绑定的所有函数

  • 群体攻击-种族灭绝

    $(selector).on('click', a);
    $(selector).on('click', b);
    $(selector).on('change', b);
    $(selector).on('blur', c);
    
    // 取消click事件绑定的函数a和b
    $(selector).off('click');
    

• 3.取消指定事件上的指定函数

  • 3.1>绑定时指定命名空间，解绑时参数的事件种类中指定命名空间，只取消同一命名空间下函数的绑定

  • 群体攻击-家族灭绝

    $(selector).on('click.demo', a);
    $(selector).on('click.demo', b);
    $(selector).on('click', c);
    $(selector).on('change', b);
    $(selector).on('blur', c);
    
    // 取消命名空间为'demo'的click事件绑定的函数a和b，而函数c不会被取消
    $(selector).off('click.demo');
    

  • 3.2>参数中指定事件种类和绑定的函数(函数必须指向与绑定时相同的一个)，只取消该种类事件下该函数的绑定

  • 单体攻击

    $(selector).on('click', a);
    $(selector).on('click', a);
    $(selector).on('click', b);
    $(selector).on('change', b);
    $(selector).on('blur', c);
    
    // 取消click事件绑定的函数a(包括重复绑定)，函数b不会被取消
    $(selector).off('click', a);