jQuery 事件绑定

在 jQuery1.7 之后，推荐统一使用 on() 来进行事件绑定。

在讲事件绑定之前，需要首先明确一个概念。通常，我们是需要对具体的节点的相关事件作处理，比如一个按钮被点击了之类的。但这里有一个问题，如果我们能获取到具体的节点，当然没什么说的。不过有时，我们要处理的节点却还没有存在，但是我们又要预定义它的事件处理。比如，我们说在一个 UL 中，每一个 LI 被点击时，都要执行一个函数。但是， UL 中的内容本身可能是变化的，开始时它只有两个 LI ，之后又变成了三个 LI ，多出的那一个 LI 也要能响应事件才行。

上述的情况是一个普遍的需求。我们可以利用事件的冒泡机制来实现目的。我们把事件处理绑定在 UL 上，这样，当 LI 被点击时，会冒泡到上级的 UL ，这样在处理事件时就可以判断出具体是哪个节点的事件，以便作下一步处理。

当然，原理是这样，具体操作时， on() 这个方法已经把一切都封装好了。

.on()

绑定事件

.off()

移除绑定

.one()

绑定单次事件

on() 的基本使用方式是： .on(event, handler)

最基本的使用：

$('#btn').on('click',
  function(eventObj){
    console.log('haha')；
  }
);

对于 handler ，它默认的上下文是触发事件的节点（与行为节点无关）：

<div id="btn">
  <div>哈哈</div>
  <div id="btn2">哈哈</div>
  <div>哈哈</div>
</div>

$('#btn').on('click',
  function(eventObj){
    console.log(this);
  }
);

你看到是 div#btn 。

当然，使用 $.proxy() 你可以随意控制上下文：

$('#btn').on('click',
  $.proxy(function(eventObj){
    console.log(this.a);
  }, {a: 123})
);

event 参数还支持通过：

• 以 . 分割的子名字，这些名字父子的名字空间效果。
• 以空格分割的多个事件。

名字空间效果：

$('#btn').on('click.my',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

$('#btn').on('click.my.other',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

多个事件：

$('#btn').on('click.my click.other',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

on() 的扩展使用方式为： .on( events [, selector] [, data], handler(eventObject) ) 。

其中的 data 是一个数据存储空间，在 eventObj.data 中访问到。

$('#btn').on('click', {a: 123},
  function(eventObj){
    console.log(eventObj.data.a);
  }
);

而 selector 则是一个过滤规则，这对于在前面讲过的，在父级节点预定义不存在节点的行为很有用。

<div id="btn">
  <span>哈哈</span>
</div>

$('#btn').on('click', 'p',
  function(eventObj){
    console.log('here');
  }
);
var f = function(){
  $('#btn').append('<p>新的</p>');
}

on() 的另外一种调用形式： .on( events-map [, selector] [, data] ) ：

$('#btn').on(
  {
    'click': function(eventObj){console.log('click')},
    'mousemove': function(eventObj){console.log('move')}
  }
);

off() 的使用方式与 on() 完全类似：

var f = function(eventObj){
  console.log('here');
}
$('#btn').on('click', f);
$('#btn').off('click');
$('#btn').off('click', '.cls');
$('#btn').off('click', f);