0
点赞
收藏
分享

微信扫一扫

事件冒泡


 

目录

 前言

导语

代码部分

总结

 前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

事件冒泡

事件冒泡_事件冒泡

事件冒泡_事件冒泡_02编辑

代码部分

<body>
        <!-- 开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。 -->
		<div class="father">
			<div class="son">son</div>
		</div>
		<script>
			// 常见事件对象的属性和方法
			// 阻止冒泡  dom 推荐的标准 stopPropagation()
			var son = document.querySelector('.son')
			son.addEventListener(
				'click',
				function (e) {
					console.log('son')
					e.stopPropagation() // stop 停止  Propagation 传播
					e.cancelBubble = true // 非标准 cancel 取消 bubble 泡泡
				},
				false
			)

			var father = document.querySelector('.father')
			father.addEventListener(
				'click',
				function () {
					console.log('father')
				},
				false
			)
			document.addEventListener('click', function () {
				console.log('document')
			})
            //只打印出son
		</script>
	</body>

事件冒泡_事件冒泡_03

总结

<!-- 开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。 -->


举报

相关推荐

0 条评论