jquery - javascript: document.dispatchEvent(CustomEvent) does nothing -

i have following chunk of code

$(function(){      var taskevent = new customevent('taskadded',{         detail: {             message:'a task fue ponida, champion'         },         bubbles:true,         cancelable:true     });      var btn = $("#boton");      function handlesugar(e){         console.log(e.detail.message);     }      btn.click(function(e){          document.dispatchevent(taskevent);     });      $(document).on('taskevent',handlesugar);  }) 

when clicking in button (#boton) nothing happens. idea?

some clarifications:

• the button created, not problem
• the console shows no error @ all, that's why i'm lost
• the expected behavior custom event 'taskevent' triggered, when pressing button message appear in console log.

you listening taskevent event taskadded.

$(document).on('taskevent',handlesugar); 

should be

$(document).on('taskadded', handlesugar);