Skip to main content
adicionou 10 caracteres ao conteúdo
Fonte Link
Costamilam
  • 10mil
  • 7
  • 42
  • 105

Consegui fazer algo semelhante, talvez não seja a melhor maneira, mas funciona:

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Salva a função em um lugar qualquer, no caso, escolhi o protótipo de EventTarget
EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

//Adiciona uma propriedade ao protótipo de EventTarget (poderia ser em qualquer outro lugar)
EventTarget.prototype.custumListenercustomListener = {
  myClick: []
};

//Altera a função addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  //Se não houver a variável, a cria
  if (!EventTarget.prototype.custumListener[type]customListener[type]) {
    EventTarget.prototype.custumListener[type]customListener[type] = [];
  }

  //Adiciona o listener à lista
  EventTarget.prototype.custumListener[type]customListener[type].push({
    element: this,
    callback: listener
  });

  //Chama a função antiga
  this._addEventListener(type, listener, options);
}

//Adiciona um ouvinte do evento personalizado aos elmentos
document.querySelector('button').addEventListener('myClick', event => console.log('Clicked on button'));
document.querySelector('a').addEventListener('myClick', event => console.log('Clicked on link'));

//A lista de eventos:
console.log(EventTarget.prototype.custumListenercustomListener)

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(listener of EventTarget.prototype.custumListenercustomListener.myClick) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === listener.element) {
            //Dispara o evento customizado de clique
            listener.callback(event);
        }
    }
});
<button>Click here!</button>

<a href="#!">Click here too!</a>

Vou implementar num projeto e depois postar um exemplo mais útil (talvez cross-browser também)

Consegui fazer algo semelhante, talvez não seja a melhor maneira, mas funciona:

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Salva a função em um lugar qualquer, no caso, escolhi o protótipo de EventTarget
EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

//Adiciona uma propriedade ao protótipo de EventTarget (poderia ser em qualquer outro lugar)
EventTarget.prototype.custumListener = {
  myClick: []
};

//Altera a função addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  //Se não houver a variável, a cria
  if (!EventTarget.prototype.custumListener[type]) {
    EventTarget.prototype.custumListener[type] = [];
  }

  //Adiciona o listener à lista
  EventTarget.prototype.custumListener[type].push({
    element: this,
    callback: listener
  });

  //Chama a função antiga
  this._addEventListener(type, listener, options);
}

//Adiciona um ouvinte do evento personalizado aos elmentos
document.querySelector('button').addEventListener('myClick', event => console.log('Clicked on button'));
document.querySelector('a').addEventListener('myClick', event => console.log('Clicked on link'));

//A lista de eventos:
console.log(EventTarget.prototype.custumListener)

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(listener of EventTarget.prototype.custumListener.myClick) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === listener.element) {
            //Dispara o evento customizado de clique
            listener.callback(event);
        }
    }
});
<button>Click here!</button>

<a href="#!">Click here too!</a>

Vou implementar num projeto e depois postar um exemplo mais útil (talvez cross-browser também)

Consegui fazer algo semelhante, talvez não seja a melhor maneira, mas funciona:

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Salva a função em um lugar qualquer, no caso, escolhi o protótipo de EventTarget
EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

//Adiciona uma propriedade ao protótipo de EventTarget (poderia ser em qualquer outro lugar)
EventTarget.prototype.customListener = {
  myClick: []
};

//Altera a função addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  //Se não houver a variável, a cria
  if (!EventTarget.prototype.customListener[type]) {
    EventTarget.prototype.customListener[type] = [];
  }

  //Adiciona o listener à lista
  EventTarget.prototype.customListener[type].push({
    element: this,
    callback: listener
  });

  //Chama a função antiga
  this._addEventListener(type, listener, options);
}

//Adiciona um ouvinte do evento personalizado aos elmentos
document.querySelector('button').addEventListener('myClick', event => console.log('Clicked on button'));
document.querySelector('a').addEventListener('myClick', event => console.log('Clicked on link'));

//A lista de eventos:
console.log(EventTarget.prototype.customListener)

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(listener of EventTarget.prototype.customListener.myClick) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === listener.element) {
            //Dispara o evento customizado de clique
            listener.callback(event);
        }
    }
});
<button>Click here!</button>

<a href="#!">Click here too!</a>

Vou implementar num projeto e depois postar um exemplo mais útil (talvez cross-browser também)

Fonte Link
Costamilam
  • 10mil
  • 7
  • 42
  • 105

Consegui fazer algo semelhante, talvez não seja a melhor maneira, mas funciona:

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Salva a função em um lugar qualquer, no caso, escolhi o protótipo de EventTarget
EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

//Adiciona uma propriedade ao protótipo de EventTarget (poderia ser em qualquer outro lugar)
EventTarget.prototype.custumListener = {
  myClick: []
};

//Altera a função addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  //Se não houver a variável, a cria
  if (!EventTarget.prototype.custumListener[type]) {
    EventTarget.prototype.custumListener[type] = [];
  }

  //Adiciona o listener à lista
  EventTarget.prototype.custumListener[type].push({
    element: this,
    callback: listener
  });

  //Chama a função antiga
  this._addEventListener(type, listener, options);
}

//Adiciona um ouvinte do evento personalizado aos elmentos
document.querySelector('button').addEventListener('myClick', event => console.log('Clicked on button'));
document.querySelector('a').addEventListener('myClick', event => console.log('Clicked on link'));

//A lista de eventos:
console.log(EventTarget.prototype.custumListener)

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(listener of EventTarget.prototype.custumListener.myClick) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === listener.element) {
            //Dispara o evento customizado de clique
            listener.callback(event);
        }
    }
});
<button>Click here!</button>

<a href="#!">Click here too!</a>

Vou implementar num projeto e depois postar um exemplo mais útil (talvez cross-browser também)