mouseenter & mouseleave events test

by dipish

HTML

<p>See debug console for log messages</p>
<div id="area" style="width: 300px; height: 200px; margin: 50px; border: solid 2px red; text-align: center; line-height: 200px;">
    <button id="toggleButton" onclick="toggleListeners();">Listen to mouseenter-mouseleave</button>
</div>

CSS

p {
    margin: 5px 0 5px 0;
}

JavaScript

window.listening = false;

window.toggleListeners = function() {
    if(!listening) {
        Ext.fly('area').on('mouseenter', divMouseEnter)
                    .on('mouseleave', divMouseLeave);
        Ext.fly('toggleButton').dom.innerHTML = 'Stop listening';
        listening = true;
    } else {
        Ext.fly('area').un('mouseenter', divMouseEnter)
                    .un('mouseleave', divMouseLeave);  
        Ext.fly('toggleButton').dom.innerHTML = 'Listen to mouseenter-mouseleave';
        listening = false;
    }
}
    
window.divMouseEnter = function(e, t) {
    console.log('mouseEnter');
}
       
window.divMouseLeave = function(e, t) {
    console.log('mouseLeave');
}