0

As a beginner I was just experimenting with various HTML elements and scripts. I then came across the HTML attribute onclick.

As I had done more of scripting before my experiments with HTML, I was wondering if there is any difference between calling the function via the DOM itself or through JS/Jquery's event listener.

E.g:-

html

<button onclick="myFunc()" id="btn1">button 1</button>

VS Script

<button id="btn2">button 2</button>

<script>
    $(document).on('click','#btn2",function(){
        //code here
    });
</script>

I would also like to know the pros and cons and which of the two is best practice.

Please do let me know if I am breaking the rules of asking questions here so I could modify/delete the question.

Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
Sagar
  • 477
  • 4
  • 15
  • 1
    The difference is that the `script` listens all the time to see if something is happening when the `html` one only triggered when clicked – Hearner Mar 15 '17 at 20:24
  • 1
    This is honestly information that you should be googling for, or even searching SO for, not asking on Stackoverflow - it's a common question, with lots of answers. – Mike 'Pomax' Kamermans Mar 15 '17 at 20:54
  • While it is true that it is a common question and already has been answered, I was not aware of the terminologies involved. Please do forgive for questioning without decent amount of homework done – Sagar Mar 15 '17 at 21:13

1 Answers1

1

I would also like to know the pros and cons and which of the two is best practice.

Pros of "VS Script":

  • elements can be added without having to add click handlers, even after function has been declared
  • A single callback function can handle clicks (or other events) on various elements and then delegate the action to various functions...
  • Using an onClick or similar attribute is a mix of JS within the HTML - this goes against the Separation of Concerns principle. With the "VS Script" the logic is separate from the markup.
  • can avoid memory-leaks
  • lends itself better to event delegation
  • Code sanitizers may complain about inline scripts in attributes like onclick, onmouseout, etc.

Cons of "VS Script":

  • Elements added to the DOM after the click handler has been registered won't trigger the click handler (see this answer for more details).
  • Support from older browsers may make achieving this more complex (e.g. addEventListener before IE 9... though if you are using a library like jQuery (like you mentioned), then this is likely handled for you...
  • More work may need to be done to get attributes of the element for which the event occurred on

For a more detailed explanation, see this answer.

Community
  • 1
  • 1
Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
  • Thank you for the answer. Never knew the term event delegation here. Makes a lot of sense from the previous answers. – Sagar Mar 15 '17 at 20:37
  • Con of `onclick`:code sanitization typically strips `on...` attributes because are a known vector for script injection from user generated content. additional con: you're mixing JavaScript and HTML, rather than loosely coupling the two, where the HTML needs to know nothing about JS, and the JS can be maintained independently of the HTML code. – Mike 'Pomax' Kamermans Mar 15 '17 at 20:52
  • Both forms *can* be used for event delegation – Kevin B Mar 15 '17 at 20:58
  • Thanks @Mike 'Pomax' Kamermans- I have heeded the feedback and revised. – Sᴀᴍ Onᴇᴌᴀ Mar 15 '17 at 21:04
  • code sanitizers may complain == we must take care that we don't get torpedoed ..... WHY DO we have all these big battle ships ?? In this case the code sanitizer is wrong because it was found to be optimal to use the inline onClick markup. Change the tooling! – Stefan Skoglund Nov 17 '21 at 23:04