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