DOM Quirks 2

DOM Quirks 2

by ZenMaster

HTML

<div class="red" id="redTest">
    <div class="blue" id="blueTest">Blue Test</div>
</div>

<button id="add" onClick="foo()">Add Green</button>

<div id="googleDiv">
    <a href="www.google.com" id="googleLink">Google</a>
</div>

CSS

.red
{
    background-color: #FF0000;
    width: 200px;
    height: 2.4em;
    color: #FFFFFF;
}

.blue
{
    background-color: #0000FF;
    width: 100px;
    height: 1.2em;
    color: #FFFFFF;
}

.green
{
    background-color: #00FF00;
    width: 100px;
    height: 1.2em;
    color: #000000;
}

JavaScript

var div = document.getElementById('redTest');
var button = document.getElementById('add');
var googleLink = document.getElementById('googleLink');
var googleDiv = document.getElementById('googleDiv');

button.addEventListener('click', function(event) {
    var greenText = document.createTextNode('Green Test');
    var greenDiv = document.createElement('div');
    greenDiv.setAttribute('class', 'green');
    greenDiv.appendChild(greenText);
    div.appendChild(greenDiv);
    console.log(event, event.target);
});

// Stopping bubbling and default behaviour
googleLink.addEventListener('click', function(event) {
    console.log('1');
    event.preventDefault();
    event.stopPropagation();
});

// Bubbling
googleDiv.addEventListener('click', function(event) {
    console.log('2');
});

// Capturing and cancellation (but preserving default behaviour)
googleDiv.addEventListener('click', function(event) {
    console.log('3');
    event.stopPropagation();
}, true);

function foo()
{
    alert('Don\'t do this');
}

// button.addEventListener('click', foo);