jQuery事件

• 1.事件机制
  jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发
• JavaScript：

btn.onclick = function() {};    //给按钮绑定事件  

• jQuery：

$btn.click(function() {});    //给按钮绑定事件 
click是一个方法，内部是对onclick事件的封装

• 2.简单的事件
  click() 单击事件
  blur() 失去焦点事件
  mouseenter() 鼠标进入事件
  mouseleave() 鼠标离开事件
  dblclick() 双击事件
  change() 改变事件，如：文本框值改变，下拉列表值改变等
  focus() 获得焦点事件
  keydown() 键盘按下事件
  mouseover冒泡，mouseenter不冒泡
  其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
• 3.事件绑定
• bind()方式
  作用：给匹配到的元素直接绑定事件（不推荐，1.7以后的jQuery版本被on取代）

// 绑定单击事件处理程序  
第一个参数：事件类型  
第二个参数：事件处理程序  
$("p").bind("click mouseenter", function(){  
    //事件响应方法  
}); 

• delegate()方式
  优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件

// 第一个参数：div，要绑定事件的元素  
// 第二个参数：事件类型  
// 第三个参数：事件处理函数  
$("div").delegate("p", "click", function(){  
    //为 div下面的所有的p标签绑定click事件  
});  

• on()方式（最现代的方式，强烈建议使用的方式）
  1

   绑定单个事件
 $('p').on('click',function () {
               console.log('xxx');
           })

2

绑定多个事件 -> 同一个回调函数
$('p').on('click mouseenter ',function (event) {
               console.log('xxx' + event.type);
           })

3

绑定多个事件 -> 多个回调函数(键值对)
键: 事件类型
值: 需要执行的函数
$('p').on({
               'click': cE,
               'mouseenter': function () {
                   console.log('鼠标移入');
               }
           })
 function cE() {
               console.log('单机事件');
           }

4

//为 div下面的所有的span标签绑定click事件 
$("div").on( "click",“span”, function() {}); 

• 4.事件解绑
• unbind() 方式

$("div").unbind(); //解绑所有的事件  
$("div").unbind(“click”); //解绑指定的事件  

• undelegate() 方式

$("div").undelegate();     //解绑所有的delegate事件  
$("div").undelegate( “click” );    //解绑所有的click事件

• off解绑on方式绑定的事件

// 解绑匹配元素的所有事件  
$("div").off();  
// 解绑匹配元素的所有click事件  
$("div").off(“click”);  
// 解绑所有代理的click事件，元素本身的事件不会被解绑  
$("div").off( “click”, “**” );  

事例

$('p').click(function () {
               console.log('xxxx');
               $('p').off('click');
           })

• 5.自动触发事件
  trigger()方法触发事件

会触发事件的默认行为.
$(':submit').trigger('click');

triggerHandler()方法触发事件

不会触发事件的默认行为.
$(':submit').triggerHandler('click');