Javascript代码，用于监听页面中的DOM事件

Question

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

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

客户端有没有可用的事件emmiters？我听说服务器端的node.js事件发射模块。

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

实际上，为了使用事件处理程序，我们必须已经知道所有的控件都没有在网页中，什么事件都可以在页面提出。

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

<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> 

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

Answer 1

如果我理解正确的话，这应该是基本的JavaScript事件： https://www.w3schools.com/js/js_events.asp

https://www.w3schools.com/jsref/dom_obj_event.asp

检查的，看看是否有帮助。

Answer 2

也许你需要设置事件监听器为每个类型的事件，你需要，将它们连接到文件和操作与事件的目标领域。

Answer 3

终于找到了解决办法。刚刚实施的monitorEvents方法，该方法可在谷歌浏览器的控制台。

请找到的jsfiddle以下链接：

https://jsfiddle.net/1v8vmr06/6/

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);