Skip to main content

One post tagged with "js"

View All Tags

· 3 min read
Lvxl

事件委托 DOM事件流

dom事件流: 元素事件响应在dom树中是从顶层的window开始‘流向’目标元素,然后又从 目标元素‘流向’顶层的window

通常我们将这种事件流向氛围三个阶段:

捕获阶段: 是指事件响应从外层window开始,逐级向内层前进,直到目标元素, 在该阶段,不会处理响应元素的注册冒泡事件

目标阶段: 是指触发事件的最底层的元素

冒泡阶段: 与捕获相反, 是从最底层开始一层一层往外传递到window最外层

    element.addEventListener(监听事件类型, 事件回调函数, 默认 false: 冒泡,捕获:true)

事件冒泡: JS中当出发某些具有冒泡性质的事件是,首先在触发元素寻找是否有相应的注册事件,如果没有再继续向上级父元素寻找是否有相应的注册事件作出相应,这就是事件冒泡。

事件委托: 利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。

这样做的优势有:

  1. 减少DOM操作,提高性能。
  2. 随时可以添加子元素,添加的子元素会自动有相应的处理事件。

原型和原型链

原型 : 每个函数都有prototype属性 称之为原型, 因为这个属性值是一个对象, 也称为原型对象

  • 可以存放一些方法和属性
  • 可以实现继承

原型链 : 每个对象都有proto指向了这个对象原型,原型也是对象, 也有proto属性, 指向了原型对象的原型对象,这样一层一层的形成了连式结构,称为原型链, 最顶层找不到了返回null

闭包

函数内部访问了函数外层的引用, 就会产生闭包

  • 变量私有化, 防止全局变量被污染