Adds the listener to each element in the collection, for the event type, e.g. 'click' or 'mouseout', and returns the collection.
To set the listener for multiple event types, supply them as a space-separated list, e.g. mouseover touchstart.
useCapture specifies whether the listener should be executed in the capturing (true) or bubbling phase (false, the default). See MDN’s addEventListener page for more details.
var svg = Pablo(demoElement).svg({height:100}),
shape = svg.path(),
pathStrings = [
'm2,50l0,0c0,-26 21,-47 47,-47l0,0c12,0 24,5 33,13c9,9 14,21 14,33l0,0c0,26 -21,47 -47,47l0,0c-26,0 -47,-21 -47,-47l0,0z',
'm2,11l0,0c0,-5 4,-9 9,-9l4,0l0,0l20,0l37,0c2,0 4,0 6,2c1,1 2,4 2,6l0,23l0,0l0,14l0,0c0,5 -4,9 -9,9l-37,0l-26,24l6,-24l-4,0c-5,0 -9,-4 -9,-9l0,0l0,-14l0,0l0,-23l0,-0z',
'm2,39l50,-36l50,36l-19,59l-62,0l-19,-59z',
'm2,49l23,-46l62,0l23,46l-23,46l-62,0l-23,-46z',
'm2,43l41,-40l40,40l-20,0l0,41l-41,0l0,-41l-20,0z',
];
function drawShape(){
var hue = Math.round(Math.random() * 360),
sat = Math.round(Math.random() * 100),
fill = 'hsl('+hue+','+sat+'%,50%)',
i = Math.floor(Math.random() * pathStrings.length);
shape.attr({d:pathStrings[i], fill:fill});
}
svg.on('touchstart click', drawShape)
.css({cursor:'pointer'});
drawShape();