SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Object Listening for CustomDispatch from a Class

    Is there a way in javascript to get a class to dispatch a custom event. Then have the object created from that same class listen for the custom event dispatch from the parent class. Thanks!

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,259
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    Sort of yes. JavaScript does not have a native Observer implementation, so you'll either have to build it yourself or use a framework such as YUI, Google Closure, or others.
    "First make it work. Then make it better."

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. I tried creating my own custom class. The dispatch event works in the class. When I try to add the even listener on the object that was created from the parent class in my html <script>, it doesn't work. Below is the code snippet, hopefully it's not to confusing. Thanks!

    Code:
    //This is my JS class
    //Custom Event
    var event = new CustomEvent("DISPATCH", {
    	  detail: {
    	    message: "TEST"
    	  }
    	});
    
    function Header(introsound, question){
    	
        this.div = document.createElement("div");
        this.div.setAttribute("id", "header");
        document.body.appendChild(this.div);   
    }
    
    //Function with dispatch event inside of it
    Header.prototype.doThisFunction = function(){
             //Dispatch Event
    	 dispatchEvent(event);
    };
    
    //Event Listner
    addEventListener("DISPATCH", newMessageHandler, false);
    
    //Event Handler
    function newMessageHandler(e){
    	console.info("Event is: ", e);
    	console.info("Custom data is: ", e.detail);
    }
    HTML Code:
    <div>
    	<script type="text/javascript">
    	var qheader = new Header();
    	
    	//EventListener
    	document.getElementById("header").addEventListener("DISPATCH", newMessageHandler, false);
    	
            //This calls the function with the dispatch even inside of it
    	qheader.doThisFunction();
    	
    	//Event Handler
    	 function newMessageHandler(){
    		window.alert("bla");
    	} 
    	</script>
    </div>

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,259
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    I believe "addEventListener" and "dispatchEvent" are methods of DOM elements, not standalone functions. See this example:

    https://developer.mozilla.org/en-US/..._example_usage
    "First make it work. Then make it better."

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reference.


Tags for this Thread

Bookmarks

Posting Permissions

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