ansaurus

Question

Where is the action listener registered?

Answer 1

A:

javascript:void(0) basically disables the href which is typically what you want to do if you need to add an event handler. Then inline on your element you can add an onclick() handler IE:

<a href="javascript:void(0);" id="myA" onclick="myFunction()"><!-- other html elements --></a>

or you can register your event via script like:

document.getElementById('myA').onclick = myFunction;

Is that what you were asking?

edl 2010-06-08 08:47:55

Thanks for your reply. That's just what I want to know. But why we sometimes use code `document.getElementById('id').onclick` to register an action listener instead of hard-coded one explicitly in element tag?

Summer_More_More_Tea 2010-06-08 08:57:56

It's better to separate presentation with any controls. Particularly when using external script files to take advantage of caching. It also make for much cleaner and maintainable code in my opinion.

edl 2010-06-08 09:19:38

Some hard-core developers think it's the "right thing to do". Key word: "Unobtrusive JavaScript". However hard-coded listeners have advantages like reliability and immediate effect (not having to wait for onload/ondomready).

RoToRa 2010-06-08 09:24:21

IMHO it's no different to add `onclick="doSomething(this)"` for functionality, than adding `class="some-class"` for styling.

RoToRa 2010-06-08 09:26:25

But consider this. If my all my blue boxes now need to be green, I can change that one value in that one class and I'm all done. If I want to change my function to execute on mouseover instead, I need to go through every place I put that function inline, that is, if I even remember, and change each one to onmouseover. Now how much easier is changing `document.getElementById('myA').onmouseover = myFunction;`? That being said, if you only have one function on one element, it may not matter much. You should certainly do what is practical for your application. ;)

edl 2010-06-08 23:55:41

I don't think you examples are comparable. Changing a color in a rule is more like changing the code inside the assigned function to do something else. Choosing to use a different event handler is more like assigning a new class. Say, for example, your page has several articles (`<div class="article">...</div>`) and then you decide you want to highlight specific ones, then you'll need to go and add a new `featured` class to those.

RoToRa 2010-06-11 11:29:00

Why add an additional class called `featured` when you can just add a rule to the original `article` class? I suppose you can also `class="featured article"`, but IMO, that's a design defect. If you inherit a 100 page site and you find a function called `replaceText()`, good luck finding out what text and on what event that function replaces! :) At the same time, finding functions called `replaceIndexHeaderTextOnLoad()` and classes called `gandolfRules` works in your favor. It's all subjective. I encourage you to do what makes you comfortable and to each his own. ;)

edl 2010-06-12 00:43:46

ansaurus

tags:

views:

answers:

Where is the action listener registered?

related questions