jQuery 开发之jQuery事件一

来源：互联网发布：淘宝怎么分辨正品店编辑：程序博客网时间：2024/05/16 07:43

1，DOM加载

$(document).ready() 和window.onload()的区别。他们虽然功能相似，但是执行时机方面是有区别的。 window.onload() 方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行。此时JavaScript可以访问网页中的任何元素。而通过jQuery 中的$(document).ready() 方法注册的时间处理程序，在DOM完全就绪时就可以被调用。此时网页中的所有元素对jQuery而言都可以被访问的，但是这并不意味着这些元素的关联的文件都已经下载完毕。要解决这个问题，可以使用jQuery中另一个页面加载方法load()方法，load()方法会在元素的onload()事件中绑定一个处理函数，如果处理函数绑定给window 对象，则会在所有内容（包括窗口，框架，对象和图片）加载完毕后触发。如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

2，事件绑定

在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来匹配元素进行特定事件的绑定，bind()方法的格式如下：

bind(type [, data],fn);

参数说明如下：
第1个参数是事件类型，事件类型包括：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup，mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, error等，当然了也可以用自定义的类型。
第2个参数为可选参数，作为event.data 属性值传递给事件对象的额外数据对象。
第3个对象则是用来绑定的处理函数。
示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){    $("p").bind("click",function(){    var content = "<div id ='content'>今天晚上吃粽子！！！</div>";    $("body").append(content);    $(this).next().show();    });});</script></head><body><p>今天晚上要吃啥？</p></body></html>

运行结果如下：
这里写图片描述
简写绑定事件代码示例如下：

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

$("span").bind("click",function(event){//do something event.stopPropagation();})

阻止默认行为
在网页中的元素有自己的默认行为，例如，单击超链接后会跳转，单击提交按钮后表单会提交，有时需要阻止元素的默认行为。
在jQuery中preventDefault() 方法可以阻止元素的默认行为
jQuery 示例代码如下：

$("#submit").bind("click",function(event){//do something event.preventDefault();})

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。在表单的例子中，可以把

event.preventDefault() //阻止默认行为

改为 return false;
也可以把事件冒泡例子中的

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

改为 return false；

2，事件对象的属性

(1)event.type
该方法的作用是获取事件的类型。

(2)event.preventDefault()
该方法的作用是阻止元素的默认方法

(3)event.stopPropagation()
该方法的作用是阻止事件冒泡

(4)event.target
该方法的作用是获取触发事件的元素。

(5)event.relatedTarget
该方法的作用是获取触发事件的相关元素。

(6) event.pageX 和event.pageY
该方法的作用是获取光标相对于页面x坐标和y坐标

(7) event.which
该方法的作用是获取在鼠标点击事件中获取到鼠标的左，中，右键，在键盘事件中获取键盘的按键。

获取鼠标的左，中，右键的jQuery示例代码如下：

$("a").mousedown(function(event){alert(event.which);    //1 ＝鼠标左键， 2=鼠标中键    3=鼠标右键})

获取键盘按键的jQuery示例代码如下：

$("input").keyup(function(event){alert(event.which);  //获取键盘的按键})

3，移除事件
首先在网页上添加一个移除事件的按钮

<button id ="delAll">删除事件</button>

移除事件的jQuery示例代码如下：

$("#delAll").click(function(event){$("btn").unbind("click");})

unbind()方法的语法结构人如下：

unbind([type],data)

第一个参数是事件类型，第二个是要移除的处理函数，具体说明如下：
(1)如果没有参数则删除所有绑定的事件。
(2)如果提供了事件类型作为参数，则只删除该类型的绑定事件
(3)如果把在绑定时的处理函数作为第二个参数，那么只有特定事件的处理函数会被删除。

另外，对于只需触发一次，随后要立即解除绑定的情况，jQuery提供了一种简单的方法 one()方法。 one()方法可以为元素绑定处理函数。当处理函数被触发一次后，立即删除。即在每一个对象上，处理函数只执行一次。
one()语法格式如下：

one(type[,data],fn)

jQuery示例代码执行如下：

$("#test").one("click",function(){//do something})

0 0