什么是事件委托,原理是什么?

1、什么是事件委托,原理是什么?

  假使我们需要对多个 li 元素添加点击事件,传统的方法是分别给每个 li 元素绑定 click 事件,假如li特别多的时候就会特别麻烦,这时候我们只需要在 ul 元素上添加一个事件处理程序,这种在 DOM 树中尽量最高的层次上添加事件处理程序的方式便是事件委托, 主要用于解决事件处理程序过多问题

2、js 中有几种定时器,有什么区别?

  1、setInterval(函数,时间)      循环定时器,会一直重复执行

  2、setTimeout(函数,时间)     只执行一次

3、如何清除定时器?

  1、clearInterval()

  2、clearTimeOut()
4、封装一个动画函数

 1 function animate(element,target){
 2             // 清理定时器
 3             clearInterval(element.timerId )
 4             element.timerId = setInterval(function(){
 5                 // 获取元素的当前位置
 6                 var current = element.offsetLeft ;
 7                 // 确定步长
 8                 var step = 8 ;
 9                 // 判断元素移动的方向
10                 step = target > current ? step :-step ;
11                 // 每次移动后的位置
12                 current += step ;
13                 // 设置div每次移动后的位置
14                 if(Math.abs(target-current)>Math.abs(step)){
15                     element.style.left = current+"px";
16                 }else{
17                     clearInterval(element.timerId);
18                     // timerId = "";
19                     element.style.left = target +"px";
20                 }
21             },10)
22         }

 

上一篇:vue自定义指令函数节流和防抖


下一篇:函数节流封装