javaScript浅谈addEventListener与on、防抖、节流

1. addEventListener与on的区别

1. 当页面滚动的时候，控制台会打印出1,2,4。不会出现3。说明on触发事件只能注册一次。
2. ele.addEventListener('eventType',fn,bol)中的第三个bol参数 true：表示事件为捕获阶段。默认为false,冒泡阶段

防抖和节流 (性能优化)

js中有许多事件都是频繁触发，例如scroll,resize,touchMove...这些事件如果对dom进行了操作，会造成很大的损耗，页面卡顿。怎么优化？可以通过对事件进行防抖和节流操作！

防抖

上述的大概意思就是当你滑动的时候，会在你停下鼠标后0.25s后才会触发你需要的回调函数，而不是每次滑动触发回调函数。

节流1

发抖确实可以解决部分需求，但是会有个问题，事件的回调函数，必须在滑动停下后，才执行。那么节流可以解决这个问题。

上述demo的意思是：每过2000ms会触发一次，当停止滑动500s后会触发一次

raf节流