jQuery中的事件

一、jQuery中的事件

1、加载DOM

 

1）执行时机

常规的JavaScript中，通常使用window.onload方法，而在jQuery中，使用$(document).ready()方法，可以提高Web应用程序的响应速度。

 

window.onload方法必须等到每一幅图片都加载完毕后才可以操作。但是使用jQuery中的$(document).ready()方法内注册的事件在DOM就绪的时候就会执行，但是要注意的是与图片相关的资源是否下载完毕，如果设置图片的样式不一定会有效，要解决这个问题可以使用jQuery总另一个页面加载的方法， -load()方法，load方法会在元素的onload方法中绑定一个处理函数如果处理函数绑定到window对象就会等窗口框架对象图像等全部加载完成后触发，如果绑定在元素上，则会等到元素加载完毕后触发。

 

代码如下：

$(window).load(function(){

 

})

等同于JavaScript中的window.onload=function(){

}

 

2）多次使用

window.onload方法不可以多次使用例如：

function one（）{alert（“one”）}

function two（）{alert（“two”）}

window.onload=one;

window.onload=two;

 

则只会弹出two，第二个会覆盖第一个。而$(document).ready()则可以多次使用。

3）简写方式

$(document).ready()可以简写为$(function(){ })

也就是说$()不带参数的时候默认为参数是document。

 

2、事件绑定

1)在文档加载完成后，要对一些元素banding事件可以使用bind方法，来对匹配元素进行特定事件的绑定，bind（）方法的调用格式为：

bind（type【，data】，fn）；

第一个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等当然也可以是自定义名称；

第二个参数是可选参数，作为event.data属性值传递给时间队形的二外数据对象。

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

PS：jQuery中的时间绑定类型比普通的JavaScript中的时间绑定类型收了on。例如：jQuery中的click（）和JavaScript中对应的onclick（）函数。

代码示例：

$(function(){

$("$panelh5.head").bind("click" ,function（）{

if（$(this).next("div.content").is(":visible")){

$(this).next("div.content").hide();

}else{

$(this).next("div.content").show();

}

}

})

与JavaScript一样在jQuery中也存在this关键字使用$(this)，this携带相应的DOM元素，使用$转换成jQuery对象。

 

可以简写绑定事件代码：

例如：

$("#PANEL H5.HEAD").mouseover(function(){

 

});

 

3、合成事件：

jQuery有两个和成事件hover（）和toggle（）方法。

 

1 ) hove()方法语法结构：hove（enter，leave)

用于模拟鼠标悬停事件，当光标移动到元素上时，会出发指定的第一个函数(enter),当鼠标移出这个元素时，会出发指定的第二个函数（leave）。

拿鼠标移入移出事件则可以不用绑定mouseover和mouseleave了可以直接使用hove代替，例如：

$(functin(){
 

$("#panl h5.head").hover(function(){

//鼠标移入代码

},function(){

//鼠标移出代码

}

})

2）toggle方法语法结构：toggle（fn1，fn2，-----fnN）；

用于模拟鼠标的连续单击事件。第一次时候出发函数fn1，再次单击的时候触发fn2，如果有更过函数则会依次处罚，直到最后一个，随后每次单机都是对这几个函数的轮番调用。

 

4、事件冒泡

1）什么是冒泡？

页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素中，并且都被绑定了click事件，同时body元素也绑定了click事件。则click事件会按照以下顺序"冒泡“；从最里面嵌套的元素到其父元素到body向上冒泡；

2）时间冒泡引发的问题

当点击最里面一层的元素的时候，事件冒泡就会出发所有click事件。为了防止事件冒泡，例如：

$("element").bind("click",function(event){

event.stopPropagation();//停止事件冒泡

});

在事件的函数中使用event.stipPropagation();来停止事件冒泡。

阻止默认行为：

如在页面中元素有自己的默认行为如超链接跳转，submit提交form表单，有时候需要组织元素的默认行为。在jQuery中提供了preventDefault（）方法；

例如：在submit中的按钮上绑定点击事件，在点击事件中添加校验，如果校验不通过我们可以在校验不通过的函数里面添加event.preventDefault()方法,达到阻止表单提交的作用。相当于returnfalse；停止事件冒泡也可以使用return false阻止事件冒泡；

3）事件捕获

事件捕获和事件冒泡是两个相反的过程，时间捕获是从最顶端向下开始触发，从外层向里面开始捕获；

不是所有的主流浏览器支持事件捕获，jQuery不支持事件捕获，如果想要使用事件捕获可以使用原生的JavaScript；

 

5、事件对象属性

1）event.type()方法

在鼠标事件中使用可以event.type获取其事件类型。

2）event.preventDefault()方法

阻止默认时间行为，例如表单提交还有超链接等；

3）evetn.stopPropagation()方法

阻止事件向上冒泡

4）even.target()方法

可以获取触发事件的元素,例如：event.target.href可以获取时间元素的属性；

5）event.relatedTarget()方法；

jQuery封装的方法，相当于mouseove中IE浏览器上的event.fromElement()方法。使之适应各种浏览器。

6）evetn.pageX()方法/event.pageY()方法

获取光标相对于页面的x坐标和y坐标。

7）event.which()方法

该方法是在鼠标单击事件中获取到鼠标的左中右键：在键盘事件中获取键盘按键。event.which获取案件代表符号，1代表鼠标左键，2代表鼠标中键，3代码鼠标右键。

8）event.metaKey()方法

获取键盘事件中获取crtl按键。

9）event.orginalEvent()方法

该方法用来指向原始的事件对象，例如js事件传递到jquery定义的事件中的时候可以使用event.orginalEvent.方法，调用原始事件中的方法。

 

6、移出事件unbind（）

1）移除按钮元素上以前注册的事件，例如：

$("#delAll").click(function(){

$("#btn").uncind("click");

}

语法结构：unbind（【type】【，data】）；

第一个参数是时间类型，第二个参数是将要移除的函数。

如果没有参数则删除所有绑定的事件。如果提供过事件类型作为参数只删除事件类型的事件。如果把绑定时传递的处理函数作为第二个参数，则只有这个特定的时间处理会被删除。

 

2）移除<button>元素的其中一个事件

数显需要为这些匿名处理函数指定一个变量。例如：

$(function(){

$('#btn').bind("click",myFun1=function(){

 

}.bind("click",myFun2=function(){

 

}.bing("click",myFun3=function(){

 

}

});

删除的时候例如：

$('delTwo’).click(function(){

$('#btn).unbind("click",myFun2);//删除“绑定的第二个函数myFun2；

});

 

One（）方法：

One（）方法的结构和bind（）方法类似，使用方法与bind（）方法相同，其语法结构如下：

one（type，【data],fn);

示例代码如下：

$(function(){

$('#btn').one("click",myFun1=function(){

 

}.one("click",myFun2=function(){

 

}.one("click",myFun3=function(){

 

}

});

使用one方法绑定单击事件后，只在用户第一次单机按钮时，处理函数才执行，之后单机毫无作用；

 

7、模拟操作

1）常用模拟

在jQuery中可以使用trigger（）方法完成模拟操作。例如可以使用下面的代码触发click事件；

$("#btn").trigger("click");

这样当页面装载完毕后就会立刻输出想要的效果，可以简化成click（），例如：$("btn"）.click();

 

2)触发自定义事件

trigger（）方法不仅出发浏览器支持的具有名称的事件也可以触发自定义名称的事件；例如：

$("#btn").bind("myClick",function(){

 

});

出发事件需要$('#btn').trigger("myClick");

 

3）传递数据

trigger（type【，data])方法有两个参数第一个参数是要出发的事件类型，第二个参数是要传递给事件处理函数的附加数据，一数组的形式传递。例如：

$('#btn').bind("myClick",function(event,message1,message2){

$('#test').append("<p>"+message1+message2+"</p>");

});

#('#btn').trigger("myclick",{"我的自定义“，”事件“});

 

4)执行默认操作

trigger（）方法出发事件后，会齿形浏览器默认操作；

$("input").trigger("focus");

不仅会出发<input>绑定的focus事件，也会使<input>元素本身得到焦点。

如果只是想出发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法，triggerHandler()方法；

$("input").triggerHandler("focus");这样只会执行绑定的事件，而不获得焦点。

 

8、其他方法

1）绑定多个事件类型

.bind("mouseovemouseout",function(){

 

});

 

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

.bind("click.plugin",function(){

}.bind("mouseover.plugin“，function（）{

}.bind("dbclick",function(){

}

使用$("button").click(function(){

$(“div”）.unbind(".plugin");

})

这样就可以通过命名空间删除要删除的事件。

 

可以接触绑定多个事件:

$("div").unbind("click").unbind("mouseover");

 

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

如果存在同元素绑定两个同样的事件，例如click事件，但是其中一个带有命名空间，

$("div").trigger("click！“）；//添加感叹号就会只执行click事件，感叹号的作用是去掉所有包含命名空间的click方法。