JavaScript and events are best practice

Question

I once read that the following encoding method is considered bad:

<a HREF="page.htm" onClick="alert('Hello World')">text link</a>

Basically, using these event handlers (like onClick) in an HTML tag is the wrong approach to use. What is the reason for this? What is the name of this "bad" technique? What is the “right” way to do this?

Answer 1

This is a built-in attribute of the event handler . (+1 chjj answer for alternatives). It is usually considered "bad for a number of reasons:

• you mix small pieces of JavaScript syntax with HTML syntax:

  • , , , ;

  • , HTML:

:.

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';">

• - , . . ;

  • , DOM;

  • , , .

Answer 2

. DOM 1 element.onclick, .

, . : , .

:

element.addEventListener('click', function() {
  console.log('hello world');
}, false); // required for old gecko

IE:

element.attachEvent('onclick', function() {
  console.log('hello world');
});

, DOM 1:

element.onclick = function() {
  console.log('hello world');
};

( : alert - , .)

, , . (, , [event], , [0] . , JS-land.)

, , - - . , HTML.

Answer 3

, , HTML script.

Best practice is to attach the event this way:

window.onload = function() {
    document.getElementById("MyLink").onclick = function() {
        alert('Hello World');
        return false;
    }
}

After providing the link identifier MyLinkfor example.

Answer 4

A better approach is called unobtrusive JavaScript , and it basically means separating behavior (JS) from structure (HTML), just like CSS is separating presentation from structure, and also for the same reasons.