jQuery中的事件
Posted sunshine_gq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的事件相关的知识，希望对你有一定的参考价值。
这次主要想要讨论的是jQuery中的事件冒泡、阻止默认行为
-----------------我是分隔符---------------
首先，我们来看看什么是事件冒泡？
我们都知道，在页面上可以有很多事件，也可以多个元素同时响应同一个事件。假设页面上有两个元素div和span，其中span元素嵌套在div元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。下面是一个小例子。
<script type="text/javascript"> $(function(){ //为span元素绑定click事件 $(‘span‘).bind("click",function(){ var txt = $(‘#msg‘).html() + "<p>内层的span元素被单击</p>" $(‘#msg‘).html(txt);
});
//为div元素绑定click事件 $(‘#content‘).bind("click",function(){ var txt = $(‘#msg‘).html() + "<p>外层div元素被单击</p>" ; $(‘#msg‘).html(txt); }); //为body元素绑定click事件 $(‘body‘).bind("click",function(){ var txt = $(‘#msg‘).html() + "<p>body元素被单击</p>" $(‘#msg‘).html(txt); }); }) </script> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div>
当我们单击内部span元素时，也单击了包含span元素的元素div和包含div的body元素，并且每一个元素都会按特定的顺序响应click事件。
元素的click事件会按一下顺序进行“冒泡”：
(1)<span>
(2)<div>
(3)<body>
之所以会成为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上至顶端。
但是，我们就会发现事件冒泡的问题----我们只想要触发span元素上的click事件，但是外层的div和body元素都被触发了click事件，因此我们需要对事件的范围进行限制。
我们想要的结果是，当单击span元素的时候，只触发span元素的click事件；当单击div元素时，只触发div上的click事件，而不触发body元素的click事件。
-----------------我是分隔符---------------
要解决这个问题，我们首先要了解什么是事件对象。事件对象就是当我们在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中保存着所有与事件有关的信息，包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
下面是事件对象的一些属性。
event.type:该方法的作用是获取到事件的类型，比如是click事件还是其他的事件。
event.preventDefault()：该方法的作用是阻止默认的事件行为。
event.stopPropagation():该方法是为了阻止事件的冒泡。
event.target:该方法是获取到触发事件的元素。
event.pageX和event.pageY：该方法是获取到光标相对于页面的x坐标和y坐标。（在js中，IE浏览器使用event.x/event.y，而在firefox浏览器中还是用event.pageX/event.pageY），若页面上有滚动条，还要加上滚动条的高度或宽度。
-----------------我是分隔符---------------
所有浏览器都支持事件对象，但是IE—DOM和标准DOM实现事件对象的方法各不相同，导致不同浏览器中获取事件对象就比较困难。
针对这个问题呢，我们强大的Jquery对其进行了必要的扩展和封装，从而使得在任何浏览器中都能轻松的获取事件对象和事件对象的一些属性。
在jquery中使用事件对象很简单，只需要为函数添加一个参数。
$("element").bind("click",function(event){
});//当单击element后，event对象就被创建了，事件处理函数执行完毕后，事件对象就被销毁
当我们获取到事件对象后，我们就可以实现阻止我们的事件冒泡了，代码如下：
$(‘span‘).bind("click",function(event){
var txt = $(‘#msg‘).html() + "<p>内层span元素被单击</p>";
$(‘#msg‘).html(txt);
event.stopPropagation();//阻止事件冒泡
});
同理可以使用event.stopPropagation可以阻止div元素上的冒泡问题。
-----------------我是分隔符---------------
下面我们继续看看默认行为。
网页中的元素都有属于自己的默认行为，l例如，单击超链接后会跳转，单击提交按钮后表单会提交，但是有时我们不需要这些默认行为，所以我们需要阻止这些元素的默认行为。
在jQuery中提供了preventDefault（）方法来阻止元素的默认行为。
跟阻止冒泡事件的用法类似，我们只需为事件对象添加这个方法：event.preventDefault();
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false：return false;
以上是关于jQuery中的事件的主要内容，如果未能解决你的问题，请参考以下文章