Alternative to 'onclick' for a variable number of links?

[Jeff Dunlap]

I'm learning MooTools and converted some javascript into a MooTools class.

Please note that the number of hyperlinks generated by the server are completely variable.  Although the following appears to work fine is there a better way than using 'onclick'?

<a href="" onclick="myclass.myfunc(param1,param2); return false;">some_text</a>

[Arian Stolwijk]

Yes, inline event handlers are in almost all cases a bad idea.

With MooTools you can use .addEvent.

so you have this html:

<a href="#" id="link">some text</a>

and this JS

$('link').addEvent('click', function(event){

    event.preventDefault(); // prevents the default action (which is the "return false" in your code")

    myclass.myfunc(....);

});

If you have more links you can use 

$$('some css selector').addEvent('click', ...);

Or sometimes better:

<div id="parent">

    <a href="#>link 1</a>

    <a href="#>link 1</a>

    <a href="#>link 1</a>

    <a href="#>link 1</a>

</div>

$('parent').addEvent('click:relay(a)', function(event){

    // ...

});

[Jeff Dunlap]

Arian,

Thank you for responding.  Your suggestions gave me a good starting point for me to avoid inline event handlers, i.e.:
onclick="myclass.myfunc(param1,param2);

This is what I have so far:

http://jsfiddle.net/jeff_j_dunlap/Dfa5h/

Although I am able to access the parameters, storing them in the hyperlink's href, it does not feel right.  Am I approaching this the wrong way?

Thanks again

[Sanford Whiteman]

> Am I approaching this the wrong way?

If you're using eval(), it's *definitely* the wrong way.

See the touchups I made here:

http://jsfiddle.net/Dfa5h/1/

· you can chain addEvent right on the result of $$(). $$() returns an
array of Elements, and you can run any Element method, such as
addEvent() on Elements as well, and it will map each item in the array
to the method

· use data-* attributes and you don't need to pollute the href
attribute, which should be useable in scriptless environments or at
the very least give a nice display in the status bar

· simple split() instead of eval -- eval must be destroyed

-- Sandy

[Jeff Dunlap]

Sandy, that's exactly what I needed!  Thank you!

[Rolf Langenhuijzen]

gotcha... $$(eval).destroy();