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. EasyUI datagrid默认勾选checkbox时注意事项

    在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...

  2. 详解Java反射机制

    反射是程序在运行状态下,动态的获取某个类的内部信息的一种操作.例如:类名,包名,所有属性的集合,所有方法的集合,构造方法的集合等.该操作发生在程序的运行时状态,所以编译器管不着有关反射的一些代码,通常 ...

  3. JQuery 根据ID在页面中定位

    1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...

  4. MySQL存储过程_创建-调用

    阅读目录:MySQL存储过程_创建-调用-参数 存储过程:SQL中的"脚本" 创建存储过程 调用存储过程 存储过程体 语句块标签 存储过程的参数 in:向过程里传参 out:过程向 ...

  5. 蓝桥杯-李白打酒-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. phpcms笔记

    一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...

  7. Python库的安装方法

    Python库的安装方法 Python的解释器CPython是开源的,我们可以下载查看其源代码,同时,Python语言的各种库也都是开源的.利用Python语言编程,可用的库有很多,在Python官方 ...

  8. poj1011 搜索+剪枝

    DFS+剪枝 POJ2362的强化版,重点在于剪枝 令InitLen为所求的最短原始棒长,maxlen为给定的棒子堆中最长的棒子,sumlen为这堆棒子的长度之和,那么InitLen必定在范围[max ...

  9. #使用parser获取图片信息,输出Python官网发布的会议时间、名称和地点。

    # !/usr/bin/env/Python3 # - * - coding: utf-8 - * - from html.parser import HTMLParser import urllib ...

  10. 【css笔记(2)】如何给元素应用规则?

    css选择器 在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link ...