JSFiddle - React, Tailwind, and code Playground

by ghostoy

HTML

<a href="http://www.baidu.com/" target="_blank" onclick="alert('click handler in HTML')">Click to open baidu in another window</a>
<a href="http://www.baidu.com/" onclick="alert('click handler in HTML')">Click to open baidu in this window</a>

JavaScript

function appHandlers() {
    var links = document.getElementsByTagName('a');
    for(var i = 0, length = links.length; i < length; i++) {
        var link = links[i];
        link.addEventListener('click', function(e){
            // app handlers
            alert('click handler app');
        });
    }
}

function injectHandlers() {
    document.addEventListener('click', function(e){
        // injected handler to prevent default behavior
        if (e.srcElement.tagName === 'A' && e.srcElement.target === '_blank') {
            e.preventDefault();
            alert('click handler injected js: ' + e.srcElement.href);
        }
    });
}

function dynamicAddedElements() {
    $('<a/>')
        .attr({'href': 'http://www.baidu.com', 'target': '_blank'})
        .text('dynamic added link')
        .click(function(e){
            alert('click handler in dynamic added elements');
        }).appendTo('body');
}

appHandlers();
injectHandlers();
dynamicAddedElements();