jQuery 事件

$(selector).on(event,childSelector,data,function,map)

　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});


如果你需要移除on()所绑定的方法，可以使用off()方法处理。
$(document).ready(function(){

　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

tip:如果你的事件只需要一次的操作，可以使用one()这个方法

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)

$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

多个事件绑定同一个函数

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});

多个事件绑定不同函数

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

绑定自定义事件

$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});

传递数据到函数

function handlerName(event) 
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

适用于未创建的元素

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

http://www.cnblogs.com/leejersey/p/3545372.html



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

trigger()

triggerHandler()

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

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

toggle()

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

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

[speed], [easing ], [fn ] 

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

 

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

对表格的切换一个类

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

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

用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

$("p").blur( function () { alert("Hello World!"); } );

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

$("p").click( function () { $(this).hide(); });

$("p").dblclick( function () { alert("Hello World!"); });

 $("#login").focus();

$("input[type=text]").focus(function(){
  this.blur();
});

focusin()
当 <div> 元素或其任意子元素获得焦点时，设置 <div> 元素的背景颜色：
http://www.runoob.com/try/try.php?filename=tryjquery_event_focusout

focusout()

keydown()
当按下按键时，改变文本域的颜色：


keypress()

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

keyup()

mousedown()

mouseenter()

定义和用法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

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

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件

mouseleave()

mousemove()

mouseout()

mouseover()

$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });
});

定义和用法

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

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

mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_over_out_trigger

mouseup()

定义和用法

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

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。

当松开鼠标按钮时，隐藏或显示元素：

1、$(document).ready(function(){
$("button").mouseup(function(){
$("p").slideToggle();
});
});



2、$(document).ready(function(){
$("button").mouseup(function(){
$("div").slideToggle();
});
$("#mousePara").mouseover(function(){
$("button").mouseup();
});
});

　　

resize()

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

x=0;
$(document).ready(function(){
$(window).resize(function() {
$("span").text(x+=1);
});

<span>0</span>

$(window).resize( function(){
    alert("不建议调整窗口大小!");
} );

// 触发window对象的resize事件
// $(window).resize( );

var minSize = { width: 800, height: 600 };

$(window).resize( minSize, function(event){
    var min = event.data;
    var $dom = $(this);
    if( $dom.width() < min.width ){
        $("body").append("<br>窗口宽度不要小于" + min.width );
    }else if( $dom.height() < min.height ){
        $("body").append("<br>窗口高度不要小于" + min.height);
    }
} );

scroll()

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

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$("div").scroll(function() {
  $("span").text(x+=1);
});

select()

描述:

触发所有input元素的select事件:

jQuery 代码:

$("input").select();

描述:

当文本框中文本被选中时执行的函数:

jQuery 代码:

$(":text").select( function () { /* ...do something... */ } );

submit()

当提交表单时，会发生 submit 事件。

该事件只适用于表单元素。

描述:

提交本页的第一个表单:

jQuery 代码:

$("form:first").submit();

描述:

如果你要阻止表单提交:

jQuery 代码:

$("form").submit( function () {
  return false;
} );

unload()

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

具体来说，当发生以下情况时，会发出 unload 事件：

• 点击某个离开页面的链接
• 在地址栏中键入了新的 URL
• 使用前进或后退按钮
• 关闭浏览器
• 重新加载页面 

• $(window).unload( function () { alert("Bye now!"); } );