jQuery入门(5)：事件
事件
页面载入
ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
// Your code here...
});
或者直接：当然jQuery可以为$
jQuery(function() {
// Your code using failsafe $ alias here...
});
事件处理
bind(type,data,fn)：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数
当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){
event.preventDefault();
});
通过使用 stopPropagation() 方法只阻止一个事件起泡。
$("form").bind("submit", function(event){
event.stopPropagation();
});
one(type,data,fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,data)：在每一个匹配的元素上触发某类事件
提交第一个表单
$("form:first").trigger("submit")
给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler(type,data)：这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作
例：如果你对一个focus事件执行了 .triggerHandler()，浏览器默认动作将不会被触发，只会触发你绑定的动作。
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
代码:
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
unbind(type,data)：bind()的反向操作，从每一个匹配的元素中删除绑定的事件
把所有段落的所有事件取消绑定
$("p").unbind()
将段落的click事件取消绑定
$("p").unbind( "click" )
删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
// code to handle some kind of event
};
$("p").bind("click", foo);
$("p").unbind("click", foo);
交互处理
hover(over,out)：一个模仿悬停事件的方法（修正了使用mouseout事件的一个常见错误）。
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn,fn)：每次点击时切换要调用的函数
fn (Function) : 第奇数次点击时要执行的函数。
fn (Function) : 第偶数次点击时要执行的函数。
对表格的切换一个类
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
ALL事件
blur()/blur(fn)
说明：触发每一个匹配元素的blur事件/或者绑定一个事件处理函数
使用：$("p").blur(); /$("p").blur( function () { alert("Hello World!"); } );
change()/change(fn)
click()/click(fn)
dblclick()/dblclick(fn)
error()/error(fn)
focus()/focus(fn)
keydown()/keydown(fn)
keypress()/keypress(fn)
keyup()/keyup(fn)
load(fn)
mousedown(fn)
mousemove(fn)
mouserout(name)/blur(fn)
mouseover(fn)
mouseup(fn)
rasize(fn) 当文档窗口改变大小时触发
$(document).resize(function(){
alert("Stop it!");
});
scroll(fn) 当滚动条发生变化时触发
$(document).scroll( function() { /* ...do something... */ } );
select()/select(fn)
submit()/submit(fn)
$("form").submit( function () {
return false;
} );
upload(fn)
页面卸载的时候弹出一个警告框: $(document).unload( function () { alert("Bye now!"); } );
