web-dev-qa-db-fra.com

Comment puis-je lier tous les événements d'un élément DOM?

Comment puis-je lier tous les événements (c'est-à-dire click, keypress, mousedown) sur un élément DOM, à l'aide de jQuery, sans les lister individuellement?

Exemple:

$('#some-el').bind('all events', function(e) {
    console.log(e.type);
});
jqueryjavascript-events
59
Yosef

il existe un moyen simple (mais pas précis) de tester tous les événements:

function getAllEvents(element) {
    var result = [];
    for (var key in element) {
        if (key.indexOf('on') === 0) {
            result.Push(key.slice(2));
        }
    }
    return result.join(' ');
}

puis liez tous les événements comme ceci:

var el = $('#some-el');
el.bind(getAllEvents(el[0]), function(e) {
    /* insert your code */
});
52
otakustay

Vous pouvez également redéfinir jQuery.event.trigger pour intercepter chaque événement, mais je pense que cette méthode n'est utile que pour l'exploration des API externes et non pour la production:

var oldJQueryEventTrigger = jQuery.event.trigger;
jQuery.event.trigger = function( event, data, elem, onlyHandlers ) { 
  console.log( event, data, elem, onlyHandlers ); 
  oldJQueryEventTrigger( event, data, elem, onlyHandlers ); 
}
47
Leonid Shagabutdinov

jQuery a changé la façon dont il enregistre les événements. Il existe plusieurs façons d'extraire la liste en fonction de la version utilisée. J'ai encapsulé la version "la plus récente" dans un plugin , mais vous voulez essentiellement:

var events = $._data($('yourelement')[0], "events");

Cela donne une liste imbriquée de tous les événements liés, regroupés par l'événement "base" (pas d'espace de nom).

Cependant, je viens de me rendre compte que vous voulez tous les événements jQuery natifs - vous pouvez inspecter $.event, dont certains sont sous $.event.special, mais la réponse acceptée peut toujours être votre meilleur choix. Vous pouvez également consulter les listes jQuery comme fonctions de liaison possibles .

9
drzaus

Si vous souhaitez lier plusieurs événements à la même fonction, séparez-les simplement par des espaces.

$("#test").bind("blur focus focusin focusout load resize scroll unload click " +
    "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + 
     "mouseleave change select submit keydown keypress keyup error", function(e){
    $("#r").empty().text(e.type);
});

Exemple simple sur jsfiddle

8
Mark Coleman

Voici une petite extension pour jQuery:

$.fn.onAny = function(cb){
  for(var k in this[0])
    if(k.search('on') === 0)
      this.on(k.slice(2), function(e){
        // Probably there's a better way to call a callback function with right context, $.proxy() ?
        cb.apply(this,[e]);
      });
  return this;
};

Usage:

$('#foo').onAny(function(e){
  console.log(e.type);
});

Aussi, vous pouvez simplement utiliser la console du navigateur (de cette réponse ):

monitorEvents($0, 'mouse'); // log all events of an inspected element
monitorEvents(document.body); // log all events on the body
monitorEvents(document.body, 'mouse'); // log mouse events on the body
monitorEvents(document.body.querySelectorAll('input')); // log all events on inputs
7
mu3

Je ne pense pas que jQuery ne supporte aucun caractère générique (ce serait difficile et semé d'embûches), mais la liste des événements standard est finie (bien que malheureusement un peu dispersée à travers le spec d'événement DOM2 , le - spéc. DOM2 HTML , et le spéc. Événements DOM ), vous pouvez toujours les lister simplement. jQuery vous permet de donner plusieurs noms d’événements à lier (délimités par des espaces), par exemple:

$('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){
    console.log(e.type);
});
3
T.J. Crowder

J'ai pris le script de Mark Coleman et l'ai amélioré un peu pour mes besoins.

Je voudrais le partager avec vous: http://jsfiddle.net/msSy3/65/

var lastEvent = null,
    countEvent = 0;
$("#test").bind("blur focus focusin focusout load resize scroll unload click" + " dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function (e) {
    if (lastEvent !== e.type) {
        countEvent++;
        $("#r").prepend("<span>" + countEvent + ": " + e.type + "<br></span>");
        $("#r > span:nth-child(21)").remove();
        lastEvent = e.type;
    }
});
0
DaviideSnow