dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How do I create an object with its own events

  1. #1
    Join Date
    Jan 2014
    Posts
    9

    How do I create an object with its own events

    Suppose I create an object such as YouTube's video player (but not the same, this is just for an example). I want to fire events when the player ends, and when it starts playing, etc.
    So in any code by any customer that uses my object, I want him to be able to do something like:
    Code:
     player.addEventListener("onWeirdPlayerEnded", "somefunction");
    I do know that there is such a thing as a javaScript "createEvent" feature such as:
    Code:
    var ppEvent = document.createEvent('CustomEvent');
    However, I have some questions about it.

    Lets say in my player code, I have function that does something like this:
    Code:
    function reachedEnd() {
    // do something
    }
    It seems to be that I should fire the event "onWeirdPlayerEnded" at this point (within the function). But I don't think I should create it with "createEvent" at the same time that I fire it. I should just fire it. Creation should have happened earlier.

    So what I need to know is:
    1. Where and how do I create the event and give a name such as "onWeirdPlayerEnded"
    2. How do I fire the event (in the do something... area)
    3. Can the customer's use it in his webpage with his "addEventListener".
    Thanks

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,941
    What events are you talking about adding?
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2014
    Posts
    28
    Depends what player you're using, Here's an example from Flow Player.

    Code:
    var api = flowplayer();
    
    // bind to the finish event
    api.bind("finish", function(e, api){
        alert("Bacon");
    });

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,941
    Ok, if you are using HTML5 then you can use one of the HTML5 video player triggers to fire an event on playback end.

    You might want to consider a test to see if the HTML5 video / audio are supported then use a different player as a fall back position, much simpler.
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Jan 2014
    Posts
    9
    The answer is this:
    var msg = document.getElementById("msg").value.trim();

    if (msg && window.CustomEvent) {
    var event = new CustomEvent("newMessage", {
    detail: {
    message: msg,
    time: new Date(),
    },
    bubbles: true,
    cancelable: true
    });

    this.dispatchEvent(event);
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles