jQuery中页面加载完毕调用的函数有2种简写形式。

$(function(){
});

$().ready(function(){
});

当文档装载完毕后，想要为元素绑定事件可以使用bind()方法。bind方法调用的格式为：

bind(type, [,data], fn);

其中type为事件类型，包括：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup等。第2个参数作为even.data属性值传递给事件对象的额外数据对象，第3个参数则是处理函数。

bind()方法可以为元素绑定所有的JavaScript事件，而一些事件（click, mouseover, mouseout）在程序中会经常用到，jQuery为此提供了一套简写方法

$(function(){
  $("selector").mouseover(function(){
    $(this).next().show();
  }).mouseout(function(){
    $(this).next().hide();
  });
});

jQuery有1个合成事件方法：hover()

hover(enter, leave);

$(function(){
  $(selector).hover(function(){
    $(this).next().show();
  }, function(){
    $(this).next().hide();  
  });
});

hover参数中两个函数对应的事件是mouseenter和mouseleave。

toogle()方法如果不带参数还有另外一个作用：切换元素的状态，如果元素是可见的，则隐藏；如果隐藏的，则显示出来。

如果父元素和下面的子元素都绑定了click事件，那么如果点击了子元素那么click事件会先由子元素响应，影应完子之后父元素也会响应click事件，这种响应顺序就称之为事件冒泡。

在jQuery中绑定的事件函数添加1个参数，这个参数就是事件对象。jQuery代码如下：

$("element").bind("click", function(event){
  //...
});

当点击元素时event对象才被创建，且只有事件影应函数才能访问，函数结束之后，事件对象就销毁了。

如果要停止事件冒泡，在事件响应函数中调用事件对象的一个方法就行：

event.stopPropagation();

如果要停止元素的默认行为也可以调用事件对象的一个方法：

event.preventDefault();

接下来好好讲讲事件对象的各个属性

• event.type: 可以获取事件在类型；如果event是click事件响应函数的事件对象，那行event,type就是click
• event.target: 获取触发事件的元素。
• event.pageX和event.pageY: 可以获取鼠标相对于当前页面的坐标
• event.which: 获取鼠标单击事件中获取到鼠标的左、中、右键在键盘事件中获取键盘按键：

$("a").mousedown(function(event){
  alert(event.which);//1 = 鼠标左右；2 = 中键；3 = 右键
});

$("input").keyup(function(event){
  alert(event.which);
});

• event.metaKey: 为键盘事件中获取ctrl按键

移除事件合用jQuery的unbind()方法。

unbind([type], [data]);
$("#btn").unbind("click");//解除所有click响应函数

如果一个按钮有多个click响应函数，我们只是想要删除其中一个，那么在绑定响应函数的时候就应该为其命名，然后再把响应函数名称作为第2个参数传入unbind函数中。

$(function(){
  $("#btn").bind("click", myFun1 = function(){
    $("#test").append("<p>我的绑定函数1</p>");
  }).bind("click", myFun2 = function(){
    $("#test").append("<p>我的绑定函数2</p>");
  }).bind("click", myFun3 = function(){
    $("#test").append("<p>我的绑定函数3</p>");
  });

  $("#delAll").click(function(){
    $("#btn").unbind("click");
  });
  $("#delTwo").click(function(){
    $("#btn").unbind("click", myFun2);
  });
});

如果想要让一个事件只响应一次，那么可以使用jQuery中的one()方法。使用方法和bind方法类似

$("#btn").one("click", myFun1 = function(){
  $("#test").append("<p>我的绑定函数1</p>");
}).one("click", myFun2 = function(){
  $("#test").append("<p>我的绑定函数2</p>");
}).one("click", myFun3 = function(){
  $("#test").append("<p>我的绑定函数3</p>");
});

目前我们是点击按钮来通过鼠标实际点击来触发事件，jQuery实际上还可以对过调用trigger()方法来模拟触发鼠标点击操作

$("#btn").trigger("click");
$("#btn").click();//也支持简写

jQuery的bind()方法可以为dom元素绑定自定义事件。自定义事件只能用trigger()方法模拟执行

$("#btn").bind("myClick", function(){
  $("#test").append("<p>自定义事件</p>")
});
$("#btn").trigger("myClick");

trigger()方法实际上有2个参数，第1个参数之前演示过要触发的事件类型，第2个参数是要传递给事件处理函数的附加依据，以数组的形式传递。使用格式如下：

$("#btn").bind("myClick", function(event, message1, message2){
  $("#test").append("<p>" + message1 + message2 + "</p>");
});
    
$("#btn").trigger("myClick", ["我的自定义事件", "事件"]);

trigger()方法触发事件后，会执行浏览器的默认操作，如果只想触发绑定的事件，而不触发浏览器默认操作，可以使用jQuery中的triggerHandler()方法。

bind方法一次性还可以添加多个事件类型。

$("#btn").bind("click mouseover", function(event, message1, message2){
  $("#test").append("<p>" + message1 + message2 + "</p>");
});