[笔记] 用户行为分析：JavaScript注入式监听所有DOM事件

公司内部的web工具有很多功能是会被经常使用的，有一部分是几乎废弃的。

那么，如何在不破唤性修改原有源代码的基础上去分析用户行为呢？

于是就想监听web UI上的所有事件，比如用户经常点一个button，那就证明这个button对应的功能是对用户非常有用的。

那么关键是要解决如何hook这些事件了。

一个很简单的解决方案：

https://github.com/dna2github/dna2petal/blob/master/samples/evtmonitor.html

https://github.com/dna2github/dna2petal/blob/master/evtmonitor/petal-evtmonitor.js

整个monitor框架代码也就一百行，思路也比较容易想到，就是replace掉addEventListener，在原来的addEventListener上封装一层，这样就可以达到hook所有事件的目的了。

为了让事件的callback和事件触发的target能可查找，代码中为Object添加了identifier的属性来唯一标识object。这样给出（target，callback）就能统计callback在target这里运行了多少次。

要是想要拓展也很简单：加一个函数给（target，event_callback）向map_listener里注册一个callback，这个callback会在每次target里触发event的时候被执行（js 59行），所以可以轻松的打出event对象进行分析。

注入这个东西也很简单，就是将<scripttype="text/javascript"src="../evtmonitor/petal-evtmonitor.js"></script>放在head的最前面，保证它尽可能早得被执行。之后再加<scripttype="text/javascript">$petal.evtmonitor.switchOn();</script>就开始hook了（见sample html）。

当然，这里的event monitor不适用于直接<tag onclick="callback()"></tag>和dom_obj.onclick=callback;。如果用的是jQuery，因为jQuery也是调用addEventListener，所以是可以被监听的。

后面就是获取用户行为数据进行统计了～