如何在文本框上附加onclick事件？

Question

Hi, I want to attach on click event on Text Box with value A in attachment and same with B. I am using dojo toolkit with the following code:

  window.onload = function () {

         dojo.query('.test').onclick(function(){
              alert('test');

            });
};

I have a table control having two column name and value both columns contain textboxes.On column name textbox i have added a class with name 'test'.The table rows increase dynamically as shown in attachment. Now my concern is these textboxes increase dynamically how can i attach event on these textbox.On signle textbox this is working fine but here table rows increase and how can i find particular textbox with same class? Can anyone help me?

Answer 1

define the function separately.

var myFunc = function() {
 alert('test');
};

Now, use it, to attach to text boxes (like you have already done)

dojo.query('.test').onclick(myFunc);

But, while adding new rows, it is your duty to attach this function to the newly added text boxes. You can refer it by the name "myFunc".

Note:- Running the code piece again - "dojo.query('.test').onclick(myFunc);" will add duplicate handlers for existing textboxes.

Answer 2

If you are adding a large number of handlers or if the information on the screen is dynamic, you'll want to look at using delegated event handlers.

With delegation, you are only adding one handler, which is better for memory usage and you would be adding the handler to the container, not each specific item, which means that the items themselves can safely change without having to re-attach handlers to them.

For more details, I would point you towards this excellent answer: What is DOM Event delegation?