JQuery-事件

事件

事件绑定

jQuery中的事件绑定，可以绑定多个同名事件而不会发生冲突。

// eventName(fn)
// 编程效率略高，部分事件未能实现
$('.btn').click(function(){
    // ...
});

// on(eventName, fn)
// 编程效率略低，所有JS事件都能实现，可以绑定自定义事件
$('.btn').on('click', function(){
    // ...
});

事件移除

// 移除指定事件
$('.btn').off('click');

// 移除所有事件
$('.btn').off();

事件自动触发

• trigger

  $('.btn').trigger('click');
  

• triggerHandler

  $('.btn').triggerHandler('click');
  

• trigger 与 triggerHandler 的 区别：

  • tigger 不会阻止冒泡事件；triggerHandler 会阻止冒泡事件
  • trigger 不会阻止默认事件；triggerHandler 不会阻止默认事件

自定义事件

自定义事件的两个条件：

• 必须通过on来进行定义
• 必须通过 trigger/triggerHandler来进行注册

$('div').on('myClick', function(){
    // ...
});
$('div').trigger('myClick');

事件命名空间

命名空间可以有效地管理同一事件的不同监听器，尤其在定义组件的时候可以有效地保证组件内部的事件只在组件内部有效，不会影响到其它组件。

事件命名空间的两个条件：

• 必须通过on来进行定义
• 必须通过 trigger/triggerHandler来进行注册

$('div').on('click.demo1', function(){
    // ...
});

事件委托

jQuery中普通的事件监听，只能监听在在绑定事件时DOM中已有的元素，无法监听在绑定之后才添加的DOM元素。这个时候我们就需要进行事件委托，委托页面中已有的元素进行事件监听。

$("ul").delegate("li", "click", function () {
     // ...
 });

移入移除事件

• mouseover/mouseout事件, 在子元素上移入移出时也会触发父元素的事件
• mouseenter/mouseleave, 在子元素上移入移出时不会触发父元素的事件
• hover可以监移入移出事件，会触发事件冒泡