delegate click event on document I'm adding an onclick listener to the whole document then checking the source of the click. If the source of the click contains the attribute data-widget I want to go to the appropriate action. I did it but I'm hoping for a more efficient way of doing things and if I can do without the self invoking function. 

&lt;div data-widget="myaction"&gt; Click here &lt;/div&gt;

document.addEventListener("click", function(e) {
    var widgets = new Widgets();
    var w = e.target.getAttribute("data-widget");
    if(w){
        e.preventDefault();
        widgets[w];
    }
});

function Widgets(){
    var myaction = (function myaction(){
        console.log('indeed');
    })();
}
The way constructors work is that the engine creates an object, and calls the constructor passing the object as context. Essentially, the constructor is being run like a function.

console.log('indeed'); runs because you created an instance of Widget, which calls the constructor and runs your iife. The following code alone works in the same way.

document.addEventListener("click", function(e) {
  var widgets = new Widgets();
});

function Widgets(){
  console.log('indeed');
}


Now your code creates a Widgets instance regardless of the presence of data-widget. If you only deal business when it has data-widget, I suggest you create the instance within the if block.

I'm not sure what your goal with widgets[w] is, but if you mean storing w's value as a property of an instance of Widgets, I it's best if you define the object's properties in the constructor in advance. While this sacrifices dynamicity, it eliminates guesswork as to what properties an instance of Widgets contain.

Additionally, delegating all the way up to document is slow. That's one reason jQuery deprecated live and provided you on instead. live bound all handlers to document, while on gives you flexibility to where you want the delegate target bound.