jQuery的事件处理

jQuery的事件处理

文档加载事件

.ready(fn)
$(document).ready(function(){
//编写代码
});

与window.onload方法的区别
执行时间:window.onload方法是在页面中所有的DOM元素（包括元素的所有关联文件）完全加载到浏览器后才执行。
通过$(document).ready()方法注册的事件处理函数，只要DOM元素加载完成就可以执行，不管元素所关联的文件是否加载完成。
多次使用:Window.onload事件只能添加一个回调函数。原因是JavaScript的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数（相当于重新赋值），因此不能在现有的行为上添加新的行为。

Window.onload = function(){
alert(“two”); //不会执行
};

Window.onload = function(){
alert(“two”); //会执行
}

简写形式

$(function(){
//编写代码
})()

当$()不带参数时，默认参数就是“document”，因此可以简写为：

$().ready(function(){
//编写代码
});

绑定事件处理函数

on()

将一个或多个事件的处理方法绑定到被选择的元素上。on()方法适用于当前或未来的元素，如用脚本创建的新元素。
参数说明:

• events：字符串，一个或多个用空格分隔的事件类型。
• selector：字符串，选择器
• data：对象，传递给事件处理函数的数据，作为event.data的属性值存在。
• handler：函数，事件处理函数。
  用法一：on( events [, selector ] [, data ], handler )
  用法二：on( events [, selector ] [, data ] )

$("a").on("click", {
      "food":"haha"
     }, function(event) {
       $("p").text(event.data.food);
})

one()

给元素注册只监听一次的事件处理函数。一旦事件处理函数执行后，就会自动删除。
参数说明:

• events：字符串，一个或多个用空格分隔的事件类型。
• selector：字符串，选择器
• data：对象，传递给事件处理函数的数据，作为event.data的属性值存在。
• handler：函数，事件处理函数。
  用法一：one( events [, data ], handler )
  用法二：one( events [, selector ] [, data ], handler )
  用法三：one( events [, selector ] [, data ] )

支持多少事件名称:
blur keydown click load
focus keypress dblclick unload
focusin keyup mousedown resize
focusout mouseup scroll
submit mousemove error
change mouseover
select mouseout
mouseenter
mouseleave