JavaScript 进阶课程笔记 第四天

JavaScript 进阶课程笔记 第四天

DOM 事件高级

一、事件对象

1.1 获取事件对象

事件对象是什么

• 也是个对象，这个对象里有事件触发时的相关信息
• 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

元素.addEventListener('click',function(e){
	//e 就是事件对象
}
)

部分常用属性

二、事件流

2.1 事件流和两个阶段说明

事件流指的是事件完整执行过程中的流动路径

事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件捕获概念：
从DOM的根元素开始去执行对应的事件 (从外到里)

2.3 阻止事件流动

事件对象.stopPropagetion()

鼠标经过事件： mouseover mouseout 会有冒泡效果 mouseenter mouseleave没有冒泡效果

两种注册事件的区别：

• 传统on注册（L0）：
  同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  直接使用null覆盖偶就可以实现事件的解绑
  都是冒泡阶段执行的
• 事件监听注册（L2）：
  语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
  后面注册的事件不会覆盖前面注册的事件(同一个事件)
  可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
  匿名函数无法被解绑

三、事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

• 优点：给父级元素加事件（可以提高性能）
• 原理：事件委托其实是利用事件冒泡的特点
• 实现：事件对象.target 可以获得真正触发事件的元素

    

        
我是第1个小li
        
我是第2个小li
        
我是第3个小li
        
我是第4个小li
        
我是第5个小li