7.4: Handling DOM Events with Callbacks – p5.js Tutorial

This video looks at how a JavaScript function can be a callback to an event. For example, when the user clicks a button in the browser, a function is executed. Other events will be covered in future videos.

Next video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






21 responses to “7.4: Handling DOM Events with Callbacks – p5.js Tutorial”

  1. Isaac Asante Avatar

    You have no dislike on this video. I guess it's because it's helped many people.

  2. R1S8K Avatar

    How about using if() or while(), for events occurrence? Why function callbacks? Still didn't understand function pointers and function callbacks! I understood at the late of the video that including the button pressed function in the main setup function and the change color only happens when the button is pressed and inside the button pressed he's passing an function as an argument, this is ok to understand. Thank you,

  3. AdityaFingerstyle Avatar

    okay, so this only works for HTML elements right?

    For example: I cannot create a circle object and attach the mousePressed function to it

  4. Jason Thomas Avatar

    I really like how you give side projects at the end of most of your videos. It helps a lot when people want to work with the code more, but don't have any good ideas.

  5. oscar storm Avatar

    3.50 min into the video, dead laughing! Me in a nutshell.

  6. hgpwns Avatar

    I love your channel! Happy new year from the Philippines! I watch your channel and follow your exercises to relax when I'm taking a break or when I'm stuck on a problem at work.

  7. Alonso Serrano Avatar

    Hi, Daniel!
    So you’re not really binding the “global” mousePressed function to the button. You’re calling a method also named mousePressed that belongs to the object created by the createButton function, written somewhere in p5.dom.js. Right?

  8. Daniel Szwimer Avatar

    Can you explain why
    // button.mousePressed(changeColor);
    shouldn't actually be calling a function like so?

  9. Random Avatar

    I liked it but I was a bit confused on how to turn that "global function" into a "local one"

  10. J. L. J. T. Avatar

    Thanks for this enlightening tutorial series you've made. I've been binge watching these on a trip to Thailand (especially on the plane) thanks to YouTubes new offline capability on mobile devices. It's a shame you don't get ad revenue from my offline binge watching sessions…

  11. TV Shomy420 Avatar

    <button onclick="return someFunction()">sample text</button> this is the pro way of doing that

  12. Californ1a Avatar

    Will Promises be covered at some point in a future video? I'd love to see a video covering Promises since callbacks seem to be heading toward being depreciated, especially within many newer/up-to-date npm modules.

  13. Kaan KÜÇÜK Avatar

    n1 Daniel, Thanks for this series.

  14. R_u_s_s_e_l_l Avatar

    Your enthusiasm is contagious! Good, informative video. Thanks.

  15. Jason Thomas Avatar

    I want to download your book also

  16. Jason Thomas Avatar

    thanks for directing me to this vid. I'm having problems adding p5 to my libs folder. I have a full stack app with cloud9 IDE and I can only npm install when I need bower. But your videos make it so easy to comprehend. I just need to somehow get p5 inside my libs and then its on and poppin

  17. COLORMONO - Avatar

    Hi, thanks for the tutorial series! How can I pass an argument to the callback? ie: button.mouseReleased( goSection(2) );

  18. endofmysteries Avatar

    in the event handler, how come the callback function doesn't have parentheses?
    as opposed to:

    like what if there are parameters for the function?

  19. CZ Techs Avatar

    YOUR SO AWESOME!!! Thanks for everthing!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *