侦听页面中DOM事件的Javascript代码

理想情况下，我希望有一个javascript文件，该文件需要注入到我的网页中以跟踪用户活动（类似于Google Analytics的ga.js）

js文件中的代码的目的是捕获任何DOM事件，并找出用户在页面中执行的操作

客户端是否提供任何类型的事件提示器？我听说过服务器端的node.js event emmitter模块

寻找一种类似的功能，我需要在客户端实现

实际上，为了使用事件处理程序，我们必须已经知道网页中的所有控件以及网页中可以引发的所有事件

在我的例子中，网页是动态的，所以我不能直接附加事件处理程序。例如，假设这些是页面中的控件、按钮和文本框

<button id="myBtn"> Click me </button> 
<input id="myTxt" type="text"> Enter text </input> 

点击我
输入文本

我正在寻找如下javascript代码所示的功能：

<script type="text/javascript">

document.getElementsByTagName("BODY")[0].addEventListener("click", myFunction);

function myFunction(e) {
    console.log(e.target);
}

</script>

document.getElementsByTagName（“正文”）[0].addEventListener（“单击”，myFunction）；
函数myFunction（e）{
console.log（如target）；
}

---

显然，上面的代码只能处理页面中的单击事件。我要寻找的是一种更通用的方法，它可以处理DOM中发生的任何事件。

如果我理解正确，这应该是基本的JavaScript事件：

---

查看这些内容，看看是否有帮助。

可能您需要为所需的每种类型的事件设置EventListener，将它们附加到文档并使用事件目标字段进行操作。

最终找到了一个解决方案。刚刚实现了Google Chrome控制台中提供的monitorEvents方法

请在下面找到JSFIDLE链接：

---

node.js有一个名为mutation_summary js和mutation_observer js的模式，我觉得如果您使用node，您可以在代码中使用它。实际上，如果我们已经知道网页中的所有控件，这是可能的。在我的例子中，网页是动态的，所以我不能直接附加事件处理程序。

function monitorEvents(element) {
  var log = function(e) {
                    console.log(e);
            };
  var events = [];

  for(var i in element) {
    //console.log(i);
    if(i.startsWith("on")) events.push(i.substr(2));
  }

  events.forEach(function(eventName) { 
    //console.log(eventName);
    if(eventName == "click" || eventName == "keyup"){
      element.addEventListener(eventName, log); 
    }
  }); 
}

monitorEvents(document.body);