DOM是html 文档接口。
DOM将html文档的元素（即html标签）根据层级整理成树状模型。
而js操作html都是通过DOM来操作的。
一棵树，有干、有枝、有叶，叶的父级是枝，枝的父级是干。
如果你只是看文件的内容的话它是可以这样理解的：
中国 包含 云南，云南 包含 红河州， 红河州 包含 红河人hongheren.cn
红河州就是红河人 的父级，云南是红河州的父级，中国是云南的父级
例：<html><body><div></div></body></html>
body是div的父级，html是body的父级
其它一次类推。
以上是DOM父级的理解，有助于理解js事件的父级。
js事件的父级，说白了就是事件发生点的元素的对象的父级对象上的事件。
如下面的代码保存为html文件：
<html><body onclick="alert('body')"><div onclick="alert('div')"
style="width:600pxheight:400pxbackground-color:F00"></div></body></html>
用浏览器开打后你会发现点击div是body的onclick事件也被触发了。
如上，应该能够理解了吧。
移动端JS父层Touch事件用了冒泡，子层onclick事件不生效，这时候子元素就要用委托来绑定事件啊，不能直接在子元素上onclick,如$("#mydiv").on("touchend", "img", func(this))。可以参照这篇文章（我找的别人的）http://blog.csdn.net/cysear/article/details/72302977
<!DOCTYPE HTML><html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
body {
background: #ccc
}
.block {
position: absolute
left: 0
top: 100px
border: 1px solid #000
background: red
width: 30px
height: 30px
}
#google {
width: 300px
height: 300px
border: 2px inset #fff
background: #fff
position: relative
overflow: hidden
}
</style>
</head>
<body>
<div id="google">
<div id="main" class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script type="text/javascript">
function Drag (title, body, range)
{
var w = window, win = body || title, x, y, _left, _top, range = range || function (x)
{
return x
}
title.style.cursor = 'move'
title.onmousedown = function (e)
{
e = e || w.event
x = e.clientX, y = e.clientY, _left = win.offsetLeft, _top = win.offsetTop
this.ondragstart = function ()
{
return false
}
document.onmousemove = e_move
document.onmouseup = undrag
}
function e_move (e)
{
e = e || w.event
var cl = range (_left + e.clientX - x, 'x'), ct = range (_top + e.clientY - y, 'y')
win.style.left = cl + 'px'
win.style.top = ct + 'px'
w.getSelection ? w.getSelection ().removeAllRanges () : document.selection.empty ()
}
function undrag ()
{
this.onmousemove = null
}
}
function $ (x)
{
return typeof x == 'string' ? document.getElementById (x) : x
}
var google = $ ("google")
var max =
{
x : google.offsetWidth - main.offsetWidth - 4,
y : google.offsetHeight - main.offsetHeight - 4
}
var mains = google.getElementsByTagName ('div')
for ( var i = 0 i < mains.length i++)
{
Drag (mains[i], false, function (x, type)
{
return Math.max (0, Math.min (max[type], x))
})
}
</script>
</body>
</html>
