javascript - Binding click event to td vs table -

i want build excel utility in html. suppose i've table[id "mytbl"] 20 rows & 20 columns. add textbox inside td whenever users clicks on td text value.

suppose table

i've 2 options achieve [both working fine]

option i

$("#mytbl").bind("click",function(e){     var obj = e.target;     if(obj.nodename == "td"){         $(obj).html("<input type='text' value='"+$(obj).html()+"'></input>");     } }); 

option ii

$("#mytbl tr td").bind("click",function(e){     if($("input",$(this)).length==0){         $(this).html("<input type='text' value='"+$(this).html()+"'></input>");     } }); 

my question option better in terms of performance.

the first of 2 options create 1 event handler, it'll more performant. obtaining target via event has negligible cost.

to 'jquery' way, might want use delegate:

$("#mytbl").delegate("td", "click", function() {   var $this = $(this);   $this.html("<input type='text' value='"+$this.text()+"'></input>"); });