恶补jquery(四)jquery中事件--冒泡

事件

       当我们在打开一个页面的时候。浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的。在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程。

事件机制

事件中的冒泡现象

       冒泡现象说的是事件运行顺序,当一个对象上触发了一个事件。假设未定义此事件的处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播,从里到外,直到他被处理(父级对象全部同类事件都被激活),或者它到达了对象层次的顶层(即document对象)。

       通俗的讲:假把设一杯水分成不同颜色的几层。加热水的时候,当底层中有一个气泡出现时,气泡会一层层的上升,直到最层顶部。

而我们无论在哪一层观察都能捕捉到这个气泡,这杯水就是我们的”DOM“,”气泡“就是我们的事情气泡。

事件冒泡演示样例

       例如以下代码所看到的

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
</style>
</head>

<body>
<div id="box">
<h5 onclick="startDrag();"><a onclick="closeBox();" href="javascript:void(0);">close</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{
    document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
}
function closeBox()
{
    document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
}
</script>
</body>
</html></span>
       执行结果如图1:


图1

       由此我们能够看到,对于同一事件来说(都是onclick事件),先是底层触发。再是上一层触发事件,也就是”从里向外冒泡“。

而当我们把父类的h5标签的事件改onmousedown 的时候,我们会看到以下的结果。尽管针对冒泡而言应该是里层的先触发,可是对于事件onmousedown来说,触发时机遭遇onclick事件。

图2

那怎样阻止冒泡?

       js阻止冒泡现象

       例如以下代码所看到的:

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
</style>
</head>

<body>
<div id="box">
<h5 onclick="startDrag();"><a onclick="closeBox();" href="http://blog.csdn.net/lovesummerforever">close</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{
    document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
	
}
function closeBox(e)
{
    document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
	stopPropagation(e);
}

function stopPropagation(e) {  
    e = e || window.event;  
    if(e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true; //IE阻止冒泡方法  
    }  
} 
</script>
</body>
</html></span>

jquery阻止冒泡现象

       假设是通过jquery訪问的话。阻止冒泡现象方法例如以下

<span style="font-size:14px;"> $(function() {
            $("a").click(function(event) {
                  return false;
            });
 });</span>
       或者

<span style="font-size:14px;">$(function() {
            $("a").click(function(event) {
                  event.stopPropagation();
            });
 });</span>


       上述运行后,我们会发现。运行return false后。<a>标签不再跳转,而其它的都跳转。怎么阻止事件默认的跳转行为呢?

       另一个方法是event.preventDefault() ,该方法并非处理事件的冒泡。而是阻止事件的默认行为。

return false方法既阻止了冒泡,也阻止了事件的默认行为,event.stopPropagation()仅仅阻止了事件的冒泡行为,但不阻止事件的默认行为。






posted @ 2016-01-01 08:58  zfyouxi  阅读(180)  评论(0编辑  收藏  举报