jQuery事件机制

jQuery事件机制

事件的注册

• 普通的注册简单的事件，缺点只能注册一个事件

  $("p").click(function(){
      alert("简单的事件");
  }) 

• bind方式注册事件

  $("p").bind({
      click:function(){
          alert('这是bind的click事件');
      },
      mouseenter:function(){
          alert('这是bind的mouseenter事件');
      }
  })

• 委托事件 delegate

  $("div").delegate("p","click",function(){
      alert("这是一个委托事件");
  })

要给div注册一个委托事件，但是最终不是div执行的，而是p执行。

第一个参数指明事件由谁来执行。

第二个参数是事件的类型

第三个从参数，函数

• 发展到on事件,既可以委托，又可以做普通事件

  $("div").on("click","p",function(){
      alert("on的委托事件");
  })
  $("#btm").on("click",function(){
      alert("你点击的是on的普通事件");
  })

一般建议用on来注册事件，如果是用jq动态添加元素，而元素又有事件，那么要使用委托事件才能使元素带有事件。

事件的解绑

• unbind方式（一般不用）

  $(selector).unbind();//解绑所有事件
  $(selector).unbind("click");//解绑指定事件

• undelegate(一般不用了)

  $(selector).undetegate();
  $(selector).undetegate();

• off推荐使用的方式

  $(selector).off();//解绑所有事件
  $(selector).off("click");//解绑指定事件

触发事件

$("#btn").on("click",function(){
    $("p").click();
    $("p").trigger("click");
})

阻止冒泡事件

$("a").on("click",function(e){
    alert("onclick");
    //return false;     //阻止浏览器默认行为和事件冒泡
    e.preventDefault(); //阻止浏览器默认行为
    e.stopPropagation();//阻止冒泡
})