jQuery中的事件

http://www.cnblogs.com/a8167270/p/5089370.html

1、加载DOM

$(document).ready()方法，替代传统的JavaScript中的window.load()

区别:

1、windows.onload()只可以使用一次，\((document).ready()可以使用多次。 2、windows.onload()在窗体加载完毕后触发，而\)(document).ready()在DOM完全就绪的时候就可以被调用

3、简写方式

$(document).ready()

可以简写成

$(function(){});

,还可以简写成

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

2、事件绑定

bind()方法可以用来绑定事件，且可以多次调用，格式为:

bind(type[ , data],fn);

第一个参数为事件类型，包括：blur、focus、load、resize、click等，也可以自定义。

第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数用来绑定的处理函数。

$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //获取$(this).next()元素
})
});

2.1 改变绑定事件的类型

$(function(){
$("#body h5.head").bind("mouseover",function(){
$(this).next().show(); //绑定mouseover事件
}).bind("mouseout",function(){
$(this).next().hide(); //绑定mouseout事件
})
});

等待DOM装载完毕。
找到#body所在元素，绑定mouseover事件
找到内容元素，执行事件
找到#body所在元素，绑定mouseout事件
找到内容元素，执行事件

简写绑定事件的方式

$(function(){
$("#body h5.head").mouseover(function(){
$(this).next().show(); //绑定mouseover事件
}).mouseout(function(){
$(this).next().hide(); //绑定mouseout事件
})
});

3. 事件冒泡

事件冒泡

: 这个概念通俗来讲，就是页面上多个元素响应了同一个事件，这些元素有可能是包含、嵌套关系，当事件发生时，会按照元素的嵌套顺序从内向外进行执行，直到顶端。

为了解决这些问题，引入以下内容：

3.1 事件对象

在程序中使用事件对象，只需要在函数

$(function(){
$("#element").bind("mouseover",function(event){
//event:事件对象
});

当点击element元素时，事件对象被创建，这个对象只有在事件处理函数才可以访问到，事件处理函数执行完毕后，事件对象就会被销毁。

3.2 停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。jQuery提供了stopPropagation()方法来停止事件冒泡。

$(function(){
$("#element").bind("mouseover",function(event){
//event:事件对象
event.stopPropagation();//停止事件冒泡
});

3.3 阻止默认行为

网页上的元素有自己默认的行为，jQuery提供了preventDefault()方法来阻止元素的默认行为。

$(function(){
$("#submit").bind("click",function(event){
//event:事件对象
event.preventDefault();//阻止默认行为（表单提交）
});

如果同时想对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件上同时调用stopPrapagation()和preventDefault()方法的一种简写形式。

3.4 事件捕获

与事件冒泡相反的两个过程，事件捕获是从最顶端往下开始触发。但是jQuery目前不支持事件捕获。

4 事件对象的属性

event.type 获取到事件的类型
event.preventDefault() 阻止事件的默认行为
event.stopPropagation() 阻止事件冒泡
event.target() 获取到触发事件的元素
event.relatedTarget 获取到触发事件的元素
event.pageX和event.pageY 获取到光标相对页面的x坐标和y坐标
event.which 在鼠标点击事件中获取鼠标的左1、中2、右3键，和键盘的按键
event.metaKey 为键盘事件中获取ctrl按键

5 移除事件

5.1 移除按钮元素上以前注册的事件

$("#submit").unbind();//删除所���绑定事件
$("#submit").unbind("click");//删除click事件

如果没有参数，则移除所有的绑定事件，若提供事件类型参数，则只删除该类型的绑定事件。

5.2 one()方法

jQuery提供的one()方法，可以为元素绑定处理函数，当函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

6 模拟操作

模拟操作

: 模拟用户操作的方式，触发类似于click类型的事件。

$("#submit").trigger("click");//模拟click事件

有时候trigger()方法执行后，会执行浏览器默认行为，例如：

$("input").trigger("focus");
//不仅会触发绑定的focus事件，也会使input本身得到焦点

若只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用另一个类似的方法

triggerHandler("focus")

7 事件其他用法

7.1 绑定多个事件类型

$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});

7.2 添加事件命名空间，便于管理

$("div").bind("mouseover.plugin mouseout",function(){
$(this).toggleClass("over");
});

$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});

$("div").bind("dbclick.plugin",function(){
$(this).toggleClass("over");
});

$("button").click(){
$("div").unbind(".plugin");
});

在绑定事件类型后面添加命名空间，这在删除事件时只需要置顶命名空间即可。

7.3相同事件名称，不同命名空间执行方法

可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用。

$("div").bind("click",function(){
$(this).toggleClass("over");
});

$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});

$("button").click(){
$("div").trigger("click!");
//带！号，匹配所有不包含在命名空间中的click方法
});

$("div").bind("click.plugin",function(){
$("div").trigger("click");
//去掉！，两者都会被触发
});