Javascript事件模型（二）：Javascript事件的父元素和子元素
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事件的父元素和子元素的更多相关文章
- js事件模型与自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
- jquery选择器:获取父级元素、同级元素、子元素
jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
随机推荐
- Redis技术分享
环境介绍: 开发环境: spring3+tomcat7+maven3+redis-3.0.7 运行环境: Linux 前言: 项目中引入redis背景: 项目中最初将科目.打印.利润表.资产负债表.现 ...
- WPF 杂谈——入门介绍
对于WPF的技术笔者是又爱又恨.现在WPF的市场并不是很锦气.如果以WPF来吃饭的话,只怕会饿死在街头.同时现在向面WEB开发更是如火冲天.所以如果是新生的话,最好不要以WPF为主.做为选择性来学习一 ...
- 兼容IE6/7/8/9的css3插件
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <tit ...
- lock invoke 死锁事例
代码如下: using System; using System.Collections.Generic; using System.Windows.Forms; using System.Threa ...
- 使用HTMLParser爬取标签内容
以此网站为例 import urllib.request from html.parser import HTMLParser from html.entities import name2codep ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
- redis性能优化
redis日志截图:
- 使用Nginx实现Tomcat集群负载均衡
概述 要解决的问题 环境准备以及问题解决思路 配置 测试 小结 一.概述 使用Nginx主要是来解决高并发情况下的负载均衡问题. 二.要解决的问题 1.最主要是负载均衡请求分发. 2.文件上传功能,只 ...
- 区划代码 node 版爬虫尝试
前言 对于区划代码数据,很多人都不会陌生,大多公司数据库都会维护一份区划代码,包含省市区等数据.区划信息跟用户信息息息相关,往往由于历史原因很多数据都是比较老的数据,且不会轻易更改.网上也有很多人提供 ...
- maven私服nexus搭建（windows）
1.下载nexus 地址:https://www.sonatype.com/download-oss-sonatype 下载相应版本的zip包. 2.安装nexus 下载完成后,解压到本地任意目录. ...