ExtCore DOM Events

by Ryan Morris

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
    <section>
        <ul id="nav" class="main" data-fudge="5" title="Main Nav">
            <li class="button">One</li>
            <li class="button">Two</li>
            <li class="button">Three</li>
        </ul>
         <h1>Welcome</h1>

    </section>
</div>

<div id="loader"></div>

CSS

.hover {


    color:#f90;


    font-weight:bold;


    cursor: pointer;


}

JavaScript

/**
 * Events
 */

// Dom
   
    var liEls = document.getElementById('nav').querySelectorAll("li");
    
    // note: its a NodeList... array-like. No Array.forEach
    /*for (var i = 0; i < liEls.length; i++) {
        
        liEls[i].addEventListener('mouseover', function (e) {
            this.classList.add('hover');
            console.log(this);
        });
        liEls[i].addEventListener('mouseout', function (e) {
            this.classList.remove('hover');
            console.log(this);
        });
        
    }*/

    // delegation
    /*document.getElementById('nav').addEventListener('mouseover', function(e) {
        console.log(this);
        console.log(e.target || e.srcElement);
    });*/

// jQuery

    /*
    $("#nav").on('click', function(e) {
        console.log("Nav clicked via jQuery event"); 
    });

    // delegation
    $("#nav").on('click', "li", function(e) {
        console.log("List item clicked via jQuery event"); 
    });
    */

// ExtJS

    // perform an action from an event  
    var handlerFn = function(eventObject, targetEl) {
        
        console.group("ExtJS Event");
        console.log(this);
        console.log(targetEl);
        console.groupEnd();
        
        // eventObject is an Ext.EventObject describing what occured
        // targetEl is the target HTMLElement (not Ext.Element) where the event was triggered (e.currentTarget)
        // "this" is the Ext.Element handling the event (caught at)
    };

    //Ext.get('nav').on('click', handlerFn);
    //Ext.get('nav').addListener('click', handlerFn);

    // use fly, but it references the fly object in "this"
    //Ext.fly('nav').on('click', handlerFn); // Fly object
    
    // going directly through EventManager
    //Ext.EventManager.on('nav', 'click', handlerFn);
    //Ext.EventManager.addListener('nav', 'click', handlerFn);
    
    // removal
    // .un('click', this.handlerFn);
    // .removeListener('click', this.handlerFn);
    
    // use of a...