Why is the separation of JavaScript and HTML a good practice?

Question

I read about some good practices in JavaScript, and one of them was unobtrusive JavaScript . The first moment caught my attention

Separation of functionality ("level of behavior") into the structure / content of the web page and presentation

On the wiki page, one example is that you should bind actions to events in JS files, not HTML. This example

<input type="text" name="date" id="date" />
...
window.onload = function() {
    document.getElementById('date').onchange = validateDate;
};

stands for

<input type="text" name="date" onchange="validateDate()" />

However, I would say that I prefer the second code with an attribute onchangeover the first. My reasons for this are

• It is easy to read and immediately finds out what will happen to the change (or any other event) on this element.
• JavaScript , ( ) onchange , click, #date.
• , AngularJS, ng-click HTML JS. ?

javascript, ,

• .
• .
• , - JS.

, .

• , , , onchange="app.validateDate()", .
• JS , onclick="app.action();".
• , onclick? , $('input').change(function () {/* ... change ... */}); app.action = function () {/* ... change ... */}.

, ?

Answer 1

. . , :

• , . app.validateDate , validateDate, . , . , .

• .onclick = handler . :

  document.getElementById('date').addEventListener('change', function () { .. });
  

  . , , , - , . , change .

• inline, . HTML-. HTML . , , . . , " "... , . , .

• : document.getElementById(..).addEventListener . <.. onclick=".."> . DRY .

. , . . script, Javascript, , , , 2.0 . 10 , git -merge. , .

Angular:

Angular , . onclick=foo, . , Angular ng-click=foo, foo ng. . Angular , API $scope, ; , - , API ( , $scope ).

ng , modus operadi .