6-1事件绑定和解绑以及命名空间

---->推荐使用on()的方式来绑定(后面创建的元素也会有事件)

• 事件绑定和解绑

bind()

绑定一个事件： bind(事件, 处理函数);
bind('click', function () {});
绑定多个事件：bind({事件1: 处理函数, 事件2:处理函数}, 事件3: 处理函数, ...)
bind({ 'click': function () {}, 'mouseover': function () {}, 'mouseout': function () {} })

bind的解绑

$('div').unbind('click');------->如果里面没有参数，将移除所有的事件

delegate() --->可以为 某元素 的 子元素 绑定事件

某元素(绑定事件的元素, 事件, 处理函数)
为div元素中的p标签绑定点击事件
$('div').delegate('p', 'click', function () {});

undelegate()解绑========

$('div').undelegate('绑定事件的元素', 'click');------->如果里面没有参数，将移除所有的事件

on() ---->on的功能可以绑定某个元素的事件，也可以给某元素的 子级元素 绑定事件

第一种用法
给 div自身 添加点击事件：
$('div').on('click', function () {})

第二种用法
给 div的子级元素span 添加点击事件$$$$$$$注意：这里就算是后面添加的span元素也有事件
$('div').on('click', 'span', function () {})

on()的事件解绑===============

对div的事件进行解绑
$('div').off('click');------->如果里面没有参数，将移除所有的事件

细节问题：
1、如果说父级元素和子级元素都是通过正常（就是click）的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑

2、如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑

3、有一个固定的写法
$('#box').off('click', '**'); --》这行代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在

• 事件命名空间

(1)当为一个元素的一个事件绑定了多个监听器时，怎样精确地解绑其中一个监听器？需要了解一下事件的命名空间。

**无命名空间**
$('#box1').on('click', function () {
  console.log('box1 click---->无命名空间');
});
**有命名空间**
$('#box1').on('click.hq', function () {
  console.log('box1 click.hq---有命名空间');
  });

以上为box1的click事件指定了一个名为 hq 的命名空间

(2)当需要移除 click.hq 这个命名空间的处理函数时

$('#box1').off('click.hq');

注意：
$('#box1').off('click');---》如果这样就表示全部解绑了

(3)当使用trigger来触发事件时，需要注意的是：

如果只想要触发 click ,而不想触发 click.hq 的处理函数
那么就不可以使用 $('#box1')trigger('click'),因为这样会连 click.hq 一起触发
如果解决这个问题呢？在事件类型后面加 !
 $('#box1').trigger('click!')