jQuery .on() and .off() 命名空间

jQuery .on() and .off() 命名空间

博客分类：

• 生活
• 前端开发

 

jQuery1.7开始，jQuery引入了全新的事件绑定机制，jQuery .on() 和 off() 两个函数统一处理事件绑定，也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件，也要从DOM元素上解绑事件，比如:

1. $('.item').on('click', doThisCoolThing);
2. $('.item').on('click', doThisOtherCoolThing);
3. $('.item').trigger('click'); // 两个click事件都触发
4. $('.item').off('click'); // 两个click事件都解绑

使用事件命名空间我们可以在创建事件的时候指派名称到事件处理器，并在使用trigger()和off()时通过这个名称指定到特定的函数。调用的时候就可以通过使用不同的命名空间灵活的指派事件. 比如：

1. $('.item').on('click.navigate', doThisCoolThing);
2. $('.item').on('click.notify', doThisOtherCoolThing);
3. $('.item').trigger('click.navigate'); // 只有带有navigate这个命名空间的方法才会触发
4. $('.item').off('click.notify'); // 只有带有notify这个命名空间的方法才会解绑

也可以使用多个命名空间，无论使用哪个名字都会生效，通过命名空间代码规范（产品.模块.事件）让事件的层次更清晰：

1. $('.item').on('click.navigate.notify', doThisCoolThing);
2. $('.item').trigger('click.navigate'); // 将触发click事件
3. $('.item').off('click.notify'); // 将解绑click事件