CODEWITHSUNDEEP
javascriptfunctioneventsdom-events
matt
matt

Reputation: 44363

Javascript function triggered on event - get target?

I'm using the Youtube Javascript API, but it might not even be a question directly related to this API.

ytplayer.addEventListener("onStateChange", "foo");

If the state of the "ytplayer" changes, foo is exectued!

function foo() {
    //how to get "ytplayer" in here?
}

Is it possible to query what fired the foo() function inside of the foo() function? Sounds weird and it's hard to explain. Just imagine I have multiple ytplayer's like ytplayer1, ytplayer2, etc and every video fires the same foo() function once its state changes.

Is it possible to retrieve which ytplayer fired foo() function inside the foo() function? Sorry, I can't explain it better! :)

edit:

Just so you get what I'm doing!

/*Control Youtube videos with swfobject*/
function onYouTubePlayerReady() {
    var $ytid = '',
        ytid = '';
    $('object[id^="ytplayer_"]').each(function() {
        $ytid = $(this).attr('id');
        ytid = document.getElementById($ytid);
        ytid.addEventListener("onStateChange", "(function(status){foo(status,"+$ytid+");})");
        ytid.unMute(); 
        ytid.setVolume(100);
    });
};

function foo( status, player ) {
    console.log(status);
    console.log(player);
    //var pl = player;
}

Upvotes: 1

Views: 1524

Answers (2)

user113716
user113716

Reputation: 322542

It appears as though the only parameter available represents the status.

Since it appears that you pass a String that is evaluated, you may need to create a separate function for each:

function foo( status, player ) {
    // do something with status and player
}

ytplayer1.addEventListener("onStateChange", "foo1");
function foo1( status ) {
    foo( status, ytplayer1 );
}

ytplayer2.addEventListener("onStateChange", "foo2");
function foo2( status ) {
    foo( status, ytplayer2 );
}

ytplayer3.addEventListener("onStateChange", "foo3");
function foo3( status ) {
    foo( status, ytplayer3 );
}

or you could try passing an entire anonymous function string:

function foo( status, player ) {
    // do something with status and player
}

ytplayer1.addEventListener("onStateChange", "(function(status){foo(status,ytplayer1);})");

ytplayer2.addEventListener("onStateChange", "(function(status){foo(status,ytplayer2);})");

ytplayer3.addEventListener("onStateChange", "(function(status){foo(status,ytplayer3);})");

EDIT: *Generic example of creating unique functions in a namespace.

    // gets called by the namespaced functions
function foo( status, player ) {
    // do something with status and player
}

  // create some namespace
window.myNamespace = {};

  // this gets called to create a new function in the namespace,
  //     and call addEventListener, which references the proper function
function funcFactory( player, i ) {

        // create a new function in myNamespace
    window.myNamespace[ "foo" + i ] = function( status ) {
        foo( status, player );
    };
        // Add event listener that calls that function
    player.addEventListener( "onStateChange", "window.myNamespace.foo" + i );
}

   // your loop
for( var i = 1; i < 10; i++ ) {
    var playa = someGeneratedPlayer();
    funcFactory( playa, i );
}

Upvotes: 2

unclenorton
unclenorton

Reputation: 1625

this should contain the required object.

Upvotes: 1

Related Questions