Catch event that happened on page

Asked

Viewed 205 times

4

Is there any way to stay monitoring the events that are happening on the page?

Any function you leave by registering on console.log for example, I don’t know, it’s just an example..

There’s a way to get this?

For example, if I click on the page I know it’s a click event, but there are other custom events that happen at certain times that I wouldn’t be able to know by myself, so my question.

javascript javascript-events

4 answers

7


You can iterate on the object properties document and create a Event Listener only in properties that begin with "on", such as onclick, onBlur, onmouseover etc. which are the properties of events.

In the addEventListener you put the event without the "on", so the use of the method substr(), for example, in the event onclick:

on    -> prop.substr(0,2)
click -> prop.substr(2)

The e.type prints the name of the triggered event.

for(let prop in document){
   if(prop.substr(0,2) == "on"){
      document.addEventListener(prop.substr(2), function(e){
         console.log(e.type);
      });
   }
}

Now, as there are more than 80 events, I recommend you list only the desired events or the most common ones. I imagine you don’t want to listen to absolutely every possible event. In this case you can create an array only with the events you want to listen to, for example:

var eventos = ['click', 'blur', 'mouseover', 'mouseup', 'mousedown'];
for(let evt of eventos){
   document.addEventListener(evt, function(e){
      console.log(e.type);
   });
}

4

It is not recommended that you listen to all events because of the performance, however, for test cases you can add multiple listeners as follows:

Object.keys(window).forEach(key => {
    if (/^on/.test(key)) {
        window.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

The object window can be replaced by the element you want to test, for example:

Object.keys($('.teste')).forEach(key => {
    if (/^on/.test(key)) {
        $('.teste').addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

And then, if you want to filter by key and mouse only, you can do it as follows:

Object.keys(window).forEach(key => {
    if (/^on(key|mouse)/.test(key)) {
        window.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

0

window.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

ai where ta 'click' you can put in the name of the event you want to listen to type 'load', 'keypress' and others

  • Yes, thank you. But if I don’t know the name of the event? So the question, monitor all the events on the page to identify them

  • if this is possible will leave your site very bad optimized because only you move your mouse from the beginning to the end of the screen you perform dozens of events imagine you have to put javascript to read all this. I recommend making an array of the most used

0

To monitor events that are happening on the page, you should first search for the events available on the page and listen to each event individually.

Example: 

  window.onload = () => {
  var ev = '';
  var allEvents = [];

  // Busca todos os eventos disponiveis no navegador
  for (ev in window) {
    if (/^on/.test(ev)) {
      // Adiciona cada evento disponivel
      document.addEventListener('' + ev.replace('on', ''), function(event) {
        console.log('Event: ', event.type);
      }, false);
    }
  }
}

Note that you do not use the "on" prefix for the event; use "click" instead of "onclick".

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.