事件冒泡目录前言导语代码部分总结前言导语编辑代码部分总结目录前言导语

前言

导语

代码部分

总结

前言

我是歌谣歌谣的意志是永恒的放弃很容易但是坚持一定很酷

导语

事件冒泡

编辑

代码部分

<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>