JavaScript WebAPIs 第四章_span[i].addeventlistenter('mouseenter',function(){-CSDN博客

本文链接：https://blog.csdn.net/qq_60353088/article/details/125649707

Web APIs

DOM - 事件高级

事件对象

获取事件对象
事件对象：也是一个对象，这个对象里面有事件触发时的相关信息。

例如鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
如何获取：在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event，ev，e

$元素 . a d d E v e n t L i s t e n t e r (^{'} c l i c k^{'}, f u n c t i o n (e))$

事件对象

事件对象常用属性

>> type 获取当前事件类型
>> clientX / clientY 获取光标相对于'浏览器可见窗口'左上角的位置
>> offsetX / offsetY 获取光标相对于'DOM元素左上角'的位置
>> key 用户按下的键盘键的值(现在'不提倡用keyCode')

事件流

事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径

事件流

假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

捕获阶段是从父到子冒泡阶段是从子到父

事件捕获和事件冒泡
事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发
事件捕获：从DOM的根元素开始去执行对应的事件 (从外到里)

事件捕获需要写对应代码才能看到效果

Dom.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

说明：

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听(onclick)，则只有冒泡阶段，没有捕获

阻止事件流动
危害：默认就有冒泡模式的存在，容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止事件流动需要拿到事件对象
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

事件对象.stopPropagation()

鼠标经过事件：

➢ mouseover 和 mouseout 会有冒泡效果

➢ mouseenter 和 mouseleave 没有冒泡效果(推荐)

阻止默认行为：e.preventDefault( )
常用于：链接点击不跳转，表单域不提交

e.preventDefault()

<a href = 'http://www.baidu.com'>跳转到百度</a>
<script>
    let a = document.querySelector('a');
	a.addEventListener('click',function(e){
        //阻止默认行为 方法
        e.preventDefault();
    })
</script>

两种注册事件的区别

事件委托

事件委托
好处：利用事件流的特征解决一些开发需求的知识技巧
总结：
- ➢ 优点：给父级元素加事件（可以提高性能）
- ➢ 原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
- ➢ 实现：事件对象.target 可以获得真正触发事件的元素

<script>
	// 不要每个li注册事件了，而是把事件委托给它的爸爸
    // 事件委托是给父级添加事件，而不是给孩子添加事件
    let ul = document.querySelector('ul');
	ul.addEventListener('click',function(e){
        //alert('我点击了')
        //得到当前的元素
        //console.log(e.target)
        e.target.style.color = 'red'
    })
</script>