Explain unobtrusive JavaScript? ( MVC Javascript interview questions)

Unobtrusive JavaScript helps you to decouple presentation and behavior.  Consider the below button code it has two parts one is the UI i.e. the button itself and second is the behavior i.e. “ShowAlert()”.

In other words the button is tied up with the “ShowAlert” action. It would be great if we could decouple the behavior from the button so that any other behavior can be attached with the button.

<input type=”button” value=”ddd” onclick=”ShowAlert()” id=”btn” />
<script>
function ShowAlert()
{
alert(“Hello”);
}
</script>

Look at this button code you can see no action is attached with the below button element.

<input type=”button” value=”ddd” id=”btn” />

Action to the button is attached on runtime as shown in the below code. If needed tomorrow we can attach some other behavior with “btn” button . So unobtrusive javascript is nothing but decoupling the presentation from the behavior.

<script>
function ShowAlert()
{
alert(“Hello”);
}
var el = document.getElementById(“btn”);
el.onclick = ShowAlert;
</script>