Question

So, this is my problem.
I want to be able to add “onevent”‘s from different locations in the document. Better explained below.

Let’s say I have an input with the trigger “onblur=’alert(this.value)'”

<input type="text" onblur="alert(this.value)" id="MyInput" />

But maybe later I decide I want to add an extra event to be fired after the alert – also “onblur” from somewhere else in the DOM. Like below

<script type="text/javascript">
  function attachOnBlurToSomething (id)
  {
    document.getElementById(id).onBlur = function () {
      alert("Another alert!");
    };
  }

  attachOnBlurToSomething ("MyInput");
</script>

All above is ofcourse just bull code. But the scenario is the same.
What would happen in this case is that I would get “Another alert!” on blur. But I would like both of them to run. Doesn’t really matter in what order. Just how?

Thanks,
Anton

Answer 1

Use addEventListener (or attachEvent where necessary – in IE < 9):

document.getElementById(id).addEventListener("blur", function() {
    alert("Another alert!");
}, false);

By doing it this way you can get rid of any inline event handlers (like your current onblur attribute), which are generally considered as bad practice.

It also means you can register as many event handlers as you like for the same event.