DOM事件标准定义了两种事件流，分别是捕获和冒泡。默认情况下，事件使用冒泡事件流，不使用捕获事件流。你可以指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。

冒泡事件流

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

捕获事件流

事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

传统的事件冒泡

传统的阻止子元素继承父元素的事件方法是：为子元素添加父元素的相同事件，然后在子元素事件中阻止事件冒泡。例如：在父元素中添加onclick事件，如果不阻止冒泡的话，点击子元素也会响应父元素事件。而在子元素中阻止冒泡的话，则子元素不响应父元素事件。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

    function test1(){

        $("#child").click(function(e){

            e.stopPropagation();

        });

        alert("测试1");

    }

</script>

</head>

<body>

    <div id="parent" onclick="test1(this);"  style="border:1px solid black;width:250px">

        <input type="text" value="" id="child">

    </div>

</body>

</html>

还有一种方法，可以去判定事件的引发者，然后进行相应处理，如果不想引发，可以简单的给出return false;

function onmousemove(event) {

        var evt = event || window.event;

        var srcObj = getTarget(evt);

        if (srcObj.tagName == "DIV")

        {

            return false;

        }

        Xxxxxxxx;

    }

特殊的事件冒泡

对于onmouseover和onmouseout事件，不能使用e.stopPropagation()或e.cancelBubble=true来阻止事件冒泡。虽然onmouseleave和onmouseenter事件可以替代onmouseover和onmouseout事件，因为这两个事件是不会冒泡的。但是这两个事件只支持IE浏览器。jQuery中有mouseleave事件个mouseenter事件，可以用bind绑定它们即可解决浏览器冲突。

纯js的操作则需如下方式：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

    function isLeaveOrEnter(e,obj){

        if(e.type != "mouseover" && e.type != "mouseout"){

            return false;

        }

        var relag= relag?e.relatedTarget:(e.type=="mouseover")?e.toElement:e.formElement;

        if(relag && relag == obj){

            if(e.type == "mouseover"){

                $("#child").val("这是一次测试");

            }else{

                $("#child").val("");

            }

        }

    }

</script>

</head>

<body>

    <div id="parent" onmouseover="isLeaveOrEnter(event,this);" onmouseout="isLeaveOrEnter(event,this);" style="border:1px solid black;width:250px">

        <input type="text" value="" id="child">

    </div>

</body>

</html>

操作原理：

获取事件作用的对象元素，判断该对象是不是绑定的对象元素，如果是则进行操作，不是则不操作。这里的示例是当鼠标移入div时input框的值为“这是一次测试”，移除div时清空值，而鼠标移入input框时则不做操作。

return false也能阻止事件冒泡，但是它不仅阻止了事件冒泡也阻止了事件本身，相当于阻塞了该事件，不再执行。而e.stopPropagation()只是阻止事件冒泡。

默认操作

事件操作可以使用阻止冒泡，而链接跳转等操作则需要阻止默认操作才行，这时需要用到event.preventDefault或window.event.returnValue=false。

Javascript事件模型（二）：Javascript事件的父元素和子元素的更多相关文章

  1. js事件模型与自定义事件

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...

  2. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

  3. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  4. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  8. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  9. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  10. jquery选择器:获取父级元素、同级元素、子元素

    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...

随机推荐

  1. js原型二

    function Box(name,age){ this.name = name; this.age = age; this.family = ['哥哥',‘姐姐’,‘妹妹’]: } Box.prot ...

  2. Filter和Listener的应用——分IP统计网站访问次数

    一:分析 统计工作需要在所有资源执行前进行,所以需要放在filter中 这个拦截器仅仅进行统计工作,不进行拦截,所以请求必须继续传递下去 用Map<String,integer>来保存数据 ...

  3. JS模式--状态模式（状态机）

    下面的状态机选择通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行. var light = function () { this.currstate = FS ...

  4. .net之抽象工厂模式

    //抽象工厂 //抽象食物 namespace abstractFactory{ public abstract class food { public abstract void Food(); } ...

  5. <CentOS7>如何设置hostname

    在CentOS/RHEL 7中,有个叫hostnamectl的命令行工具,它允许你查看或修改与主机名相关的配置: ceph@client-node ~]$ hostnamectlstatus Stat ...

  6. linux操作系统中对大小端的判断

    static union { char c[4]; unsigned long l; } endian_test = { { 'l', '?', '?', 'b' } }; #define ENDIA ...

  7. ie8兼容background-size属性

    满心欢喜地写代码,最后测试兼容性的时候发现Logo图片在IE8下特别大.明显是background-size在ie8一下不兼容. 我懂得,IE8还是个孩子,我就加几句你独有的代码让你兼容吧,司空见惯了 ...

  8. poj2566尺取变形

    Signals of most probably extra-terrestrial origin have been received and digitalized by The Aeronaut ...

  9. thinkphp 框架中的一部分方法解析

     1 thinkphp 框架 中判断输入的数值和数据库中的数值是否一致    首先 需要在view文件夹下建一个模板 名为zhuce.html <html> <head> &l ...

  10. Java基础之equals方法和"= ="的区别

    ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...