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ᴇᴌᴀ
  • 7,491
  • 8
  • 27
  • 56
Sagar
  • 447
  • 3
  • 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

0

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ᴇᴌᴀ
  • 7,491
  • 8
  • 27
  • 56
  • 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