Facebook JS (FBJS) event listener

So I have looked through most of the facebook questions here and it has absolutely confirmed my thoughts. Facebook development may be among some of the worst I've ever used. I'll avoid my rant for now, but as a note to where I'm coming from: tried php sdk, worked decently out of the box, found out I need to put the functionality on a pages tab, can't iframe on pages tab, have to use FBML (which they are retiring in two months, yet I can't start testing the iframe approach yet)

Anyway, I run into FBJS at this point. It works "good enough" for most things, but for some reason I can't get an event registered to an object (a select box in particular interest) by adding a listener (as per FBJS documentation). I am able to add it directly to the html object and have it work, but this is not desirable and I would really like to know what I consider the proper way to do it, which involves seperation of logic and display.

What I want to happen: click on the select box, make a selection, display the text of the selection in an empty div (later on adding Ajax but one step at a time here)

Code:

<script>
    var obj = document.getElementById('select-id');
    obj.addEventListener('onchange',my_func);
    function my_func(evt){
        var inner = document.getElementById开发者_开发知识库('div-id');
        inner.setTextValue('hey');        // for testing purposes
    }
</script>

The above code doesn't do anything when I make a change to the select box. However, this behaves as planned:

<select name="find_state" id="find_state" onchange="my_func();">

I will be grudgingly using this method as I develop, but would really love to know what I might be doing wrong or if anyone else has this issue? And if anyone has any opinions on the matter I would love to know of some form of facebook development recommendations as applications, pages, and tabs all appear to behave totally different from eachother, yet it seems that they all should be doing the same thing to me? Is there any unified way to develop across all three of these things, or am I missing something?

Thanks in advance, as well as for the past help!

I think it should be:

obj.addEventListener('change',my_func);

(instead of onchange)

Straight from Facebook documentation:

The third parameter [to addEventListener], boolean useCapture is required (it does not have a default value)

That means that you should have:

obj.addEventListener('change', my_func, false);

Use the following html and your events attached with .addEventListener() start to work. This seems to be undocumented "feature".

<select name="find_state" id="find_state" onmousedown="return true;">

This also enables the event to fire first time the user changes the value of select. Otherwise it would fire only on second onchange event.