Event Handling (Basic)top #

Move your mouse over (and click) the following table cells to see the result of event tracking. Related code can be found right after the table.

Jelo.load('all', function() {
    var caption    = $('#example caption'); // (see $ and Jelo.Dom.select)
    var cells      = $$('#example td');     // (see $$ and Jelo.Dom.selectAll)
    var trackOver  = $$('#example th')[0];  // only the first TH
    var trackClick = $$('#example th')[1];  // only the second TH
    
    Jelo.on(cells, 'mouseover', function() {
        // "this" is the element that fired the event
        trackOver.innerHTML = 'Last Over: ' + this.innerHTML;
    });
    
    Jelo.on(cells, 'click', function() {
        // identify which element was clicked
        trackClick.innerHTML = 'Last Clicked: ' + this.innerHTML;
        
        // identify the parent row (see Dom.ancestor)
        var row = Jelo.Dom.ancestor('tr', this);
        caption.innerHTML = 'Last row clicked: ' + row.title;
        
        // change the clicked cell colors (see CSS.getStyle and CSS.setStyle)
        Jelo.css(cells, ['background-color', 'color'], ['white', 'black']);
        Jelo.css(this, ['background-color', 'color'], ['green', 'white']);
    });
});

Removing Event Listenerstop #

Jelo.on($('button'), 'click', function() {
    // the event handler removes itself the first time it is called
    Jelo.un(this, 'click', arguments.callee); // see un and Event.remove
    
    // this alert will only happen ONCE
    alert('I got clicked!');
});