javascript - one listener for all child elements in the DOM tree -

how have 1 keypress event can triggered child element in dom tree.

for example have this:

<table> <tr>   <td><input type="text" id="col_1" value="1"/></td> </tr> <tr>   <td><input type="text" id="col_2" value="2"/></td> </tr> <tr>   <td><input type="text" id="col_3" value="3"/></td> </tr> </table> 

so example when user changes value on id=col_3 , on id=col_2 how can distinguish input triggered event? need able save , input id , value of in array can read later on.

you can try using jquery .on method,

$("table").on("keypress", "input", function(event){   alert($(this).attr("id"));// gets input id   alert($(this).val());// gets input value }); 

this code take care of inputs inside <table> tag.

if want not execute listener on every keystroke, giving sometime(3 sec) breath, try code -

var timeoutreference;  $("table").on("keypress", "input", function(event){     var el = this; // copy of object further usage      if (timeoutreference) cleartimeout(timeoutreference);     timeoutreference = settimeout(function() {         donetyping.call(el);     }, 3000); });  $("table").on("blur", "input", function(event){     donetyping.call(this); });  function donetyping(){     var el = this;     // want execute if timer pending     if (!timeoutreference){         return;     }     // reset timeout continue on code     timeoutreference = null;      //     // code execute here     //     alert('this executed when user done typing.');     alert($(el).attr("id"));//id     alert($(el).val());//value }