1.事件流与两个阶段说明
事件流指事件完整执行过程中的流动路径
Document--->html-->body-->div 捕获阶段
div-->body-->html-->Document 冒泡
捕获是父到子 冒泡是子到父
事件的捕获和事件冒泡
冒泡:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中一次被触发
事件冒泡一直存在
点击后father接着触发
必须是同名事件才会冒泡
事件捕获
概念:从dom的根元素开始去执行的事件(从外到里)
事件捕获要代码才能看到效果
Dom.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明:第三个参数传入true代表是捕获阶段触发(很少使用)
若传入FALSE代表冒泡阶段触发 默认就是false
L0事件监听 只有冒泡没有捕获
捕获
2.3 阻止事件流动
因为默认就有冒泡存在所以容易导致事件影响到父元素
想把事件限制于当前元素内,就要阻止事件流动
阻止事件流动必须拿到事件对象
事件对象.stopPropagation()
鼠标经过事件
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
阻止默认行为,比如连接不跳转
e.preventDefault()
2.4 事件委托
目标:能说出事件委托的好处
<body>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
<script>
//不要每个小li注册事件了,而是把事件委托给他的爸爸
// 事件委托给父级元素添加事件 而不是给儿子添加
let ul=document.querySelector('ul')
ul.addEventListener('click',function(){
alert('我点击了')
//现在只给ul绑定就可给li绑定
// 点击li时冒泡 爸爸ul有点击事件 触发
})
</script>
</body>
//得到当前元素
// console.log(e.target)
e.target.style.color='red'
找到真正触发的元素 e.target 事件对象.target