jQuery事件机制

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例：

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例：

$("button#demo").click(function(){$("img").hide()})

$("button#demo").change(function(){$("img").hide()})触发、或将函数绑定到指定元素的 change 事件

 

在jquery的事件模型中，有两个基本的事件绑定函数，bind与unbind，这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的onfocus，onblur，onmouseover，onmousedown等事件都可以作为bind的参数进行传递。

bind方法有三个参数(type,[data],fn)

1	$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是：事件类型(注意不需要加on)，function中的代码就是你要执行的逻辑代码

多个事件绑定：bind还允许你绑定多个事件，事件名字之间用空格隔开，例如：

 

$('a').bind('click mouseover',function(){

alert('hello');

})

在最新的jquery1.4版本中，对bind方法进行了改进，你可以在bind方法传入一个类JSON对象来一次绑定多个事件处理函数。

 

$('a').bind({

click:function(){alert('a');},

mouseover:function(){alert('a again!')}

});

})

在function函数中，你还可以通过传递一个javaScript对象给function方法，这个事件对象通常是可以省略的。

bind中还有一个参数data，该参数一般情况下很少使用，通常为了解决在同一个方法中处理同一个变量时有很好的处理。

 

var productname="Sports Shoes";

$('#Area').bind('click',function(){

alert(productname);

});

productname="necklace",

$('#Area').bind('click',function(){

alert(productname);

});

由于变量productname被重新赋值，所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要解决这个问题就必须使用到data参数，

 

var productname="Sports Shoes";

$('#Area').bind('click',{pn:productname},function(){

alert(event.data.pn);

});

productname="necklace",

$('#Area').bind('click',{pn:productname},function(){

alert(event.data.pn);

});

One

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。该方法与bind方法的参数一样，与bind方法的区别就是只对匹配元素的事件处理执行一次，执行完之后，以后再也不会执行,当然重新发起web请求时它又会执行一次。

 

$('a').one('click',function(){

alert('a');

})

单击页面上的a元素后，弹出消息，除非用户发起第二次请求，否则再次点击a元素不会弹出消息对话框。

live

该方法主要是能处理动态添加的元素，给那些后添加的元素也一样绑定事件。

 

$('a').live('click,function(){

alert('show message!');

})

然后如果我添加一个元素，

 

$('body').appnend('<a href=#>Another Element</a>');

那么该元素也会被触发事件处理函数alert。

另外，jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind(‘click’)。

一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。

 

 

3.触发事件

(1)trigger方法 触发特定元素事件

$("div").trigger('click');

(2)triggerHandler方法 与trigger方法相似,但不触发浏览器默认事件,如focus事件,使用此方法,将会阻止焦点到元素上

$("input").triggerHandler("focus");

4.特殊事件
(1)one(string event,function data)
此事件只执行一次则被删除

$("p").one("click", function(){
  alert("test");
});

(2)hover(over, out)
切换mouseover与mouseout事件

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

可用unbind mouseover与mouseout方法来删除此事件
(3)toggle(oldclick,newclick)
切换执行click事件

    $("li").toggle(
      function () {
        $(this).css("list-style-type", "disc")
               .css("color", "blue");
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

可用unbind click方法来删除此事件
s

(1)事件命名空间(便于管理)

实际使用方面:
1.当不需要全部事件,删除特定2个以上的事件.

示例:

  $("div").bind("click.plugin",function() {} );
  $("div").bind("mouseover.plugin", function(){});
  $("div").bind("dblclick", function(){});
  $("button").click(function() {$("div").unbind(".plugin");  })

在事件名称后面加命名空间,在删除事件时,只需要指定命名空间即可.以上代码执行以后,dbclick仍然存在.

(2)相同事件名称,不同命名的事件执行方法

示例:

$("div").bind("click", function(){ alert("hello"); });
  $("div").bind("click.plugin", function(){ alert("goodbye"); });
  $("div").trigger("click!"); // alert("hello") only

以上trigger方法则根据事件名称来执行事件.