Alternative to inline scripting in JavaScript

Question

I am aware that in-line scripting should be avoided by keeping html/css and javascript separated.

How is it possible to do such a thing in the following code? //consider above in the code the function alertMe() declared

<img src="LittleBrain.png"  id="littlebrain" onClick="alertMe();">

How would it be possible not using in line code?

Thanks in advance.

Answer 1

With addEventListener() :

var img = document.getElementById('littlebrain');
img.addEventListener('click', function(event){
  alertMe();
});

Answer 2

document.getElementById('littlebrain').onclick = function() { alertMe(); }

甚至更短：

document.getElementById('littlebrain').onclick = alertMe;

Answer 3

In a JavaScript code file, you can find the img element by its id , and then you can set its onclick handler. For example, using jQuery:

$("#littlebrain").click(function () {
  // ...handler code here...
});

In your case, the handler is a named function, called alertMe :

$("#littlebrain").click(alertMe);

Answer 4

It depends on the browsers you have to support, but if you're lucky and only get to worry about modern browsers, you can use .addEventListener()

var thing = document.getElementById('thing');

thing.addEventListener('click', function(e) {
  // do something here!
}, false);

If you're not so lucky, then you'll have to come up with a cross browser solution..

var thing = document.getElementById('thing');

addEvent(thing, 'click', function() {
  // do something
});

function addEvent(elem, event, callback) {
  if (elem.addEventListener) {
    elem.addEventListener(event, callback, false);
  } else if (elem.attachEvent) { // IE7 and earlier
    elem.attachEvent('on' + event, function() {
      callback.apply(elem, arguments);
    });
  } else {
    elem['on' + event] = callback;
  }
}

Or, if you use a library like jQuery, you can easily normalize the whole process

$('#thing').on('click', function() {
  // do something...
});

Answer 5

var el = document.getElementById('littlebrain');
el.addEventListener('click', alertMe, false);