Obtrusive events

Obtrusive event handlers exposed!

by MoonScript

HTML

<ol>
    <li><a href="#" onclick="return alertLinkText(this)">Click me!</a></li>
    <li><a class="unobtrusive-link" href="#">Unobtrusive onclick</a></li>
    <li><a href="#" data-emulate-onclick="return alertLinkText(this)">Emulated obtrusive onclick</a></li>
</ol>

JavaScript

// Global function, available to obstrusive event-handlers
function alertLinkText(linkElement) {
    alert(linkElement.text);
    return false;
}

$(function(){
    
    // Unobtrusive event binding, triggered by #2
    $('.unobtrusive-link').click(function(){
        return alertLinkText(this);
    });
    
    // Obtrusive event-handlers: exposed! (triggered by #3)
    $('[data-emulate-onclick]').live('click', function(){
        var handlerCode = $(this).attr('data-emulate-onclick');
        if (handlerCode) {
            return (new Function(handlerCode)).call(this);
        }
    });
    
});