jQuery-事件

鼠标事件

click: 鼠标单击时触发；

dblclick：鼠标双击时触发；

mouseenter：鼠标进入时触发；

mouseleave：鼠标移出时触发；

mousemove：鼠标在DOM内部移动时触发；

hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

keydown：键盘按下时触发；

keyup：键盘松开时触发；

keypress：按一次键后触发。

其他事件

focus：当DOM获得焦点时触发；

blur：当DOM失去焦点时触发；

change：当<input>、<select>或<textarea>的内容改变时触发；

submit：当<form>提交时触发；

ready：当页面被载入并且DOM树完成初始化后触发。

初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：

$(document).on("ready", function () {
    $('#submit').on("submit", function () {
        alert("submit");
    });
});

$(document).ready(function () {
    $("#submit").submit(function () {
        alert("xiao")
    })
});

$(function () {
    $("#submit").submit(function () {
        alert("ready")
    })
});

取消绑定

function hello() {
    alert('hello!');
}
a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
    a.off('click', hello);
}, 10000);

事件触发条件

var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件

ready(fn)

要在DOM就绪时执行的函数

$(document).ready(function(){
  // 在这里写你的代码...
});

或

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

on(events,[selector],[data],fn)

在选择元素上绑定一个或多个事件的事件处理函数。

//点击p标签弹框ｐ中的内容
$("p").on("click", function(){
alert( $(this).text() );
});

//传入数据和函数
function myHandler(event) {
alert(event.data.foo);}
$("p").on("click", {foo: "bar"}, myHandler)

//取消表单提交操作，并通过返回false来阻止事件：
$("form").on("submit", false)

//取消事件的默认动作。
$("form").on("submit", function(event) {
  event.preventDefault();
});

//停止事件的传播，阻止它被分派到其他 Document 节点
$("form").on("submit", function(event) {
  event.stopPropagation();
});

off(events,[selector],[fn])

在选择元素上移除一个或多个事件的事件处理函数。

//

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

//当所有段落被第一次点击的时候，显示所有其文本
$("p").one("click", function(){
  alert( $(this).text() );
});

trigger(type,[data])

在每一个匹配的元素上触发某类事件。

//提交第一个表单，但不用submit()
$("form:first").trigger("submit")

//给一个事件传递参数
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

这个方法的行为表现与trigger类似，但有以下三个主要区别：

* 第一，他不会触发浏览器默认事件。

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

hover([over,]out)

//over,out 描述:	鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

//对表格切换显示/隐藏
$('td).toggle();

//用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("slow");

//用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast",function(){
   alert("Animation Done.");
 });
 
 //如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的
 $('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}      

blur([[data],fn])

当元素失去焦点时触发 blur 事件。

//触发所有段落的blur事件
$("p").blur();

//任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur( function () { alert("Hello World!"); } );

change([[data],fn])

当元素的值发生改变时，会发生 change 事件。

//给所有的文本框增加输入验证
$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

click([[data],fn])

触发每一个匹配元素的click事件。

这个函数会调用执行绑定到click事件的所有函数。

//将页面内所有段落点击后隐藏。
$("p").click( function () { $(this).hide(); });

dblclick([[data],fn])

当双击元素时，会发生 dblclick 事件。

//给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });

focus([[data],fn])

当元素获得焦点时，触发 focus 事件。

//当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
  $("#login").focus();
});

//无法使用文本框
$("input[type=text]").focus(function(){
  this.blur();
});

focusin([data],fn)

当元素获得焦点时，触发 focusin 事件。(可以在父元素上检测子元素获取焦点的情况)

//获得焦点后会触发动画
$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

focusout([data],fn)

当元素失去焦点时触发 focusout 事件。(可以在父元素上检测子元素获取焦点的情况)

//失去焦点后会触发动画
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

keydown([[data],fn])

当键盘或按钮被按下时，发生 keydown 事件。

keypress([[data],fn])

当键盘或按钮被按下时，发生 keypress 事件。(每插入一个字符，就会发生 keypress 事件)

keyup([[data],fn])

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

//当按下按键时，改变文本域的颜色：
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

mousedown([[data],fn])

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

//当按下鼠标按钮时，隐藏或显示元素：
$("button").mousedown(function(){
  $("p").slideToggle();
});

mouseenter([[data],fn])

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

//当鼠标指针进入（穿过）元素时，改变元素的背景色
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

mouseleave([[data],fn])

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

//当鼠标指针离开元素时，改变元素的背景色
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

mousemove([[data],fn])

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。

//获得鼠标指针在页面中的位置：
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

mouseout([[data],fn])

当鼠标指针从元素上移开时，发生 mouseout 事件。

该事件大多数时候会与 mouseover 事件一起使用。

//当鼠标从元素上移开时，改变元素的背景色
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

mouseover([[data],fn])

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

//当鼠标指针位于元素上方时时，改变元素的背景色
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

mouseup([[data],fn])

当在元素上放松鼠标按钮时，会发生 mouseup 事件。

//当松开鼠标按钮时，隐藏或显示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

resize([[data],fn])

当调整浏览器窗口的大小时，发生 resize 事件。

//对浏览器窗口调整大小进行计数：
$(window).resize(function() {
  $('span').text(x+=1);
});

scroll([[data],fn])

当用户滚动指定的元素时，会发生 scroll 事件。

//当页面滚动条变化时，执行的函数:
$(window).scroll( function() { /* ...do something... */ } );

//对元素滚动的次数进行计数：
$("div").scroll(function() {
  $("span").text(x+=1);
});

select([[data],fn])

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

//触发所有input元素的select事件:
$("input").select();

//当文本框中文本被选中时执行的函数:
$(":text").select( function () { /* ...do something... */ } );

submit([[data],fn])

当提交表单时，会发生 submit 事件。该事件只适用于表单元素。

//提交本页的第一个表单:
$("form:first").submit();

如果你要阻止表单提交::
$("form").submit( function () {
  return false;
} );

unload([[data],fn])

在当用户离开页面时，会发生 unload 事件。

//页面卸载的时候弹出一个警告框:
$(window).unload( function () { alert("Bye now!"); } );