jQuery的DOM事件总结

一 摘要

在这里,不管你学过还是没学过,给大家总结一下jQuery的DOM事件操作.

二 具体内容

1. js页面载入事件(原生方式)

第一种内嵌写法:

第二种以匿名函数方式写法

2. jQuery页面载入事件

第一种写法:

第二种写法:

第三种写法

3.两者的区别

第一 jquery加载事件可以同时使用多个，原生方式只有一个

第二 jquery加载事件比原生加载事件执行速度快

第三 jquery加载事件执行时间点，dom树结构在内存中绘制完毕就执行加载

原生方式加载执行时间点，全部内容在浏览器里边呈现出来才会执行

第四 原生没有简写(window.onload),而后者可以简写$();

第五 jquery加载事件捕捉的时间点不一样

1) 内容绘制完毕之后就捕捉时间 DOMContentLoaded
2) 原生方式是内容在浏览器显示完毕之后再来捕捉window.onload

4.jQuery事件绑定

1.简单的事件绑定

效果:

2.可以为多个不同的事件类型，绑定同一个处理过程

效果

3.可以为同一个对象同时绑定多个不同类型事件

效果

4.可以为同一个对象的同一类型事件绑定多个处理过程

效果

5.事件的取消

5.jQuery事件的合并

Query有两个合成事件—-hover()和toggle(),这两个方法都是jQuery自定义的方法 

1、hover()方法

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

这个函数很好理解，而且实际开发中会有很多妙用。

具体实现

效果

1、toggle()方法

 语法结构 toggle(fn1,fn2,fn3...fnN)
toggle()方法用于用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3,fn4,...:更多次点击时要执行的函数。

效果图