मैं डीओएम तत्व पर सभी घटनाओं को कैसे बांध सकता हूं?

Question

मैं सभी घटनाओं को कैसे बाध्य कर सकता हूं (यानी click, keypress, mousedown) jQuery का उपयोग करके, डीओएम तत्व पर, प्रत्येक व्यक्ति को अलग-अलग सूचीबद्ध किए बिना?

उदाहरण:

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

Answer 1

है सभी घटनाओं का परीक्षण करने के लिए एक सरल (लेकिन सही नहीं) रास्ता:

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

तो इस तरह सभी घटनाओं के लिए बाध्य:

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

Answer 2

मैं jQuery किसी भी वाइल्डकार्ड (यह मुश्किल और जोखिम से भरा होगा) का समर्थन करता है नहीं लगता है, लेकिन मानक घटनाओं की सूची परिमित हालांकि दुर्भाग्य से थोड़ा के बीच बांट है (DOM2 events spec, DOM2 HTML spec, और DOM3 events spec), आप हमेशा उन्हें आसानी से सूचीबद्ध कर सकते हैं। jQuery आप एक से अधिक घटना नाम बाध्य करने के लिए, उदा देने के लिए (अंतरिक्ष-प्रतिबंधित) .:

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

Answer 3

आप एक ही कार्य करने के लिए कई घटनाओं के लिए बाध्य बस उन्हें रिक्त स्थान के साथ अलग करना चाहते हैं अनुमति मिल जाएगी।

$("#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); 
}); 

Simple example on jsfiddle

Answer 4

jQuery बदल यह घटनाओं को कैसे बचाता है, आप किस संस्करण का उपयोग कर रहे हैं, इस पर निर्भर करता है कि a couple ways to extract the list है। मैं encapsulated the "most recent" version in a plugin है, लेकिन अनिवार्य रूप से आप चाहते हैं:

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

यह सब बाध्य घटनाओं की एक नेस्टेड सूची, "आधार" घटना (कोई नाम स्थान) के आधार पर वर्गीकृत देता है।

हालांकि, मैं सिर्फ एहसास हुआ आप चाहते हैं कि सभी स्थानीय jQuery घटनाओं - आप $.event.special तहत $.event है, जो उनमें से कुछ है का निरीक्षण किया सकता है, लेकिन अभी भी accepted answer आपका सर्वश्रेष्ठ दांव हो सकता है। आप यह भी देख सकते हैं कि jQuery lists as possible binding functions क्या है।

Answer 5

आप प्रत्येक ईवेंट को पकड़ने के लिए jQuery.event.trigger को फिर से परिभाषित कर सकते हैं लेकिन, मुझे लगता है, इस तरह से, केवल बाहरी एपीआई की खोज के लिए अच्छा है उत्पादन के लिए नहीं:

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

Answer 6

मैं ले लिया है मार्क कोलमैन स्क्रिप्ट और मेरी जरूरतों के लिए इसे थोड़ा बढ़ाया।

मैं इसे आपके साथ साझा करना चाहते हैं:

$.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; 
};  

उपयोग::

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

इसके अलावा, आप बस का उपयोग कर सकते ब्राउज़र 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; 
    } 
}); 

Answer 7

यहाँ jQuery के लिए एक छोटा सा विस्तार है कंसोल (this answer से):

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