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. 对数据缺失的处理（R）

    在进行数据分析之前,我们往往需要对数据进行预处理,而最重要一部分就是怎么处理哪些缺失的数据. 通常的方法有四种: 删除这些缺失的数据. 用最高频数来补充缺失数据. 通过变量的相关关系来填充缺失值. 通 ...

  2. SELECT中的多表连接

    MySQL多表连接查询 连接(join):将一张表中的行按照某个条件(连接条件)和另一张表中的行连接起来形成一个新行的过程. 根据连接查询返回的结果,分3类: 内连接(inner join) 外连接( ...

  3. CVSS3.0打分学习

    打分计算器: Common Vulnerability Scoring System Version 3.0 Calculator: https://www.first.org/cvss/calcul ...

  4. Angular2快速起步——构建一个简单的应用

    构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...

  5. unity 本地帮助文档 慢

    unity ,打开本地帮助文档时,有时会加载很慢,主要原因是网页里嵌入了访问google的代码.解决办法:打开本地hosts文件,里面加入"127.0.0.1 fonts.googleapi ...

  6. hdu1269强连通分量入门题

    https://vjudge.net/contest/156688#problem 为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<= ...

  7. bootstrap基础

    相信大多数后端开发人员的html,css并不是太好(主要说我).想要做一些网页效果,难度会比较大.看了下bootstrap这个前端框架,发现这个框架比较好的解决了网页效果制作中一般性问题.总的来说,b ...

  8. redis安装学习

    Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类型.内置复制.Lu ...

  9. CSS之BFC及其应用

    BFC是Block Formatting Context的缩写,直译过来就是"块级格式化上下文".先不管它到底是什么,看一个例子: .parent{ border: 1px sol ...

  10. 高效工作的秘诀——Doit.im使用总结报告

    从上次购买doit.im pro账户到现在已经快一年了,从摸索到现在的熟悉,目前这款软件已经成为我工作生活中最为重要的效率工具,在此之前也用过很多软件进行时间管理,综合起来评价,doit应该算是最棒的 ...