手把手教你前端用户行为监测

344 阅读1分钟

为什么要做用户行为的监测

很多时候,我们需要通过记录用户的行为行为,比如说点击了哪些按钮;这样可以更好的了解我们的应用,帮助我们排查线上问题;但是切记一定要是在用户允许的情况下哦

先思考一个问题

假设要做一个点击行为的监测;如何不侵入业务?怎样可以比较通用的去做

我们不可能在每一个绑定了click事件的回调函数里面去处理;这样太侵入业务了;不利于维护;也会显得臃肿;

如何做

addEventListener 重写 + document.addEventListener 事件代理

什么是 addEventListener 重写 

通过修改 EventTarget.prototype.addEventListener 就可以实现在每个通过 Element.addEventListener 绑定的元素进行劫持

document.addEventListener 事件代理

就是通过在 document 上去监听事件,通过 event.target 来判断产生事件的元素;这里注意要用捕获的模式,冒泡的话,可能会存在冒泡不上去的情况

为什么要 addEventListener 重写 + document.addEventListener 事件代理 这两种模式想结合?

因为很多系统 不会直接给 Element 添加绑定事件,而是通过 事件代理 的方式处理事件分发 ,比如react;