<body>
<!-- 父对象 -->
<div id="father">
<!-- 子对象 -->
<div id="son"></div>
</div>
</body>
<style>
#father
{
width: 200px;
height: 200px;
background-color: #000;
overflow:hidden;
}
#son
{
width: 100px;
height: 100px;
margin: 50px 0px 0px 50px;
background-color: #eee;
}
</style>
<script>
/**
* 冒泡：由目标节点，向父节点冒泡
*/
var father = document.getElementById('father');
var son = document.getElementById('son');
father.addEventListener('click',function(e)
{
console.log('father')
})
son.addEventListener('click',function(e)
{
console.log('son')
})
/**
* 输出：son father
*/
/**
* 禁止冒泡
*/
father.addEventListener('click',function(e)
{
console.log('father')
})
son.addEventListener('click',function(e)
{
console.log('son')
e.stopPropagation();
})
/**
* 输出：son
*/
/**
* 事件委托：在父对象上侦听所有子对象事件，并判断是哪个元素发出的
*/
father.addEventListener('click',function(e)
{
console.log(e.target.id) //输出：son
})
</script>事件（冒泡/委托）
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一.事件 事件是用户或浏览器自身执行的某种动作，这是我自己的理解。 二.事件流 事件流描述的是从页面中接收事件的顺...
- 1.理解事件流 一言以蔽之，事件捕获是从外层元素到目标元素的过程，事件冒泡是从目标元素到外层元素的过程。如图： h...
- 事件 如何绑定事件 ele.onxxx = function(event) { }兼容性好, 但是一个元素的同一个...
- 经常在 网上看到 点击按钮 出现一个 下拉列表点击下拉列表 跳出一个 二级标题 或跳转页面用 ul--li--...
