Costum Events example

Showing how costume events won't bubble

by ariehg

HTML

<div id ='wrapper'><div id='my-div'></div></div>
<a href="#" id='click'>fire class-change</a>

CSS

#my-div{width:100px; height:100px; background:red; padding:30px}

JavaScript

function act(e){
     alert((this.id || e.target.id) + ' ' +e.type);   
}
var myDiv = $('my-div');
myDiv.addEvents({'class-change':act,'click':act});
$('wrapper').addEvents({'class-change':act,'click':act});

$('click').addEvent('click',function(){
    myDiv.fireEvent('class-change',{type:'class-change', target:myDiv});
});