Event Handling

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="index">
 <h1>hello</h1><a href="javascript:alert( \'link click\' );">click this link</a>
    {{#view App.TestView
        classNames="parent" }}
        <p>parent view</p>
        {{#view classNames="child"}}
        <p>child view</p>
        <ul>
            <li>one</li>
            <li>two</li>
    </ul>
        {{/view}}
    {{/view}}
</script>
<hr>
<div id="parent" class="parent">
    parent
    <div id="child" class="child">
        child
    </div>
</div>
<hr>

CSS

body{padding: 10px;}
.view-class{padding: 20px; background: wheat;}

.parent{
    background-color:#fff;
    position: relative;
    height:20px;
    border: solid 1px yellow;
}

.child{
    background-color:#999;
    position: absolute;
    top: 21px;
    Border: solid 1px red;
}

JavaScript

App = Ember.Application.create();

App.IndexView = Ember.View.extend( {
    classNames : [ 'view-class' ],
    click : function( evt ){
        //evt.preventDefault();
        console.log( 'click event', evt );   
    }
} );

App.TestView = Ember.View.extend( {
    mouseEnter : function( evt ){
        console.log( 'mouse enter', evt.target );
    },
    
    mouseLeave : function( evt ){
        console.log( 'mouse leave', evt.target );
    }
} );

$( document ).ready( function(){
    $( '#parent' ).on( 'mouseleave', function(){
        console.log( 'mouse leave' );
    } );
} );