How to assign an event to an object via DOM? Suppose I created

var tr = document.createElement('tr');

How do I assign the onclick event to the tr tag?

    4 answers 4

     tr.onclick = function(){ //do something }
    • And another option is that it does not fit that adding a <b> attribute </ b> - DigSil
    • did not quite understand you, could you rephrase? - rnd_d
    • He probably wanted to ask how to do that? <tr onClick = "test (); return false;"> This cannot be done, because the DOM tree of this element is created dynamically during the script operation. Or, if there is a great desire, you can create a <tr> with all attributes in advance in the document itself, and assign it to display: none - systemiv

    without setTimeout or window.onload, the script may not work in different browsers of different versions.

     window.onload = fucntion(){ var tr = document.createElement('tr'); tr.onclick = function(){ //do something } }
    • setTimeout is a very bad approach for this, only window.onload is better - rnd_d
    • one
      I understand perfectly! - Palmervan

    still as an option -

     function myFunction () {
     alert ("I was clicked");
 }

 var tr = document.createElement ("tr");
 tr.onclick = myFunction;

    PS: in JQuery, any event is usually described as element.event (function), but in the ECMAScript family of languages ​​to which the JS belongs, the function is an object. This allows you to make a lot of all tastes, such as here, or even the dynamic construction of the function body. You can also, for example, write so that events are dynamically rewritten, for example:

      element.onclick = myFunction;
     function myFunction () {
         // do something here
         this.onclick = myAnotherFunction;
     }
     function myAnotherFunction () {
         alert ("Now this function will be called when clicked");
     }

    Reply to comments:
    The practical point is that you can "build" code in the execution process. The most primitive example is any switch. But as you understand, the same switch can be much more complicated than stupidly true false.
    PS: these are language features, you do not need to use them, but I think it will not hurt anyone to know about it ..

    • And what is the practical meaning of this implementation? (meaning the second piece of code) - proteamer

    Adding a handler is better using DOM2 , not DOM0 .

     let tr = document.createElement('tr'); tr.addEventListener('click',function() { //Some code; });
    • What is the point of deleting the previous answer? - Grundy
    • @Grundy, At first I realized my delusion, decided to change it, focusing on using DOM2 , but then I realized that I was putting you in a foolish position, with the general question “What is the difference?”, Since the question was changed. Decided that it is better to delete the answer completely and answer again. PS I hope you now ask a similar question. :-) - Ilya Indigo
    • Do not hope :-) why is it better to add a handler using DOM2, and not DOM0 ? :-) - Grundy
    • @Grundy, learn.javascript.ru/...1 DOM2 is a more modern method, for me this alone is enough. 2 DOM0 makes sense to use only when we specify a handler through an HTML attribute, for example onclick 3 In the case of the declaration of a new handler DOM0, it will overwrite the old one, including the one that was defined through the HTML attribute. 4 It can not be clearly removed. - Ilya Indigo
    • How can this not be removed? - Grundy