Standard Event Model

by Susan Delgado

HTML

<div id="txt" class="light">
    <p>Text in here </p>
<a href="https://www.google.com">Light</a>
<a href="https://www.google.com">Dark</a>
</div>

CSS

.light{
    color:black;
    background-color:white;
}
.dark{

    color:white;
    background-color:black;
}

JavaScript

(function () {
    var txt = document.getElementById("txt"),
        buttons = document.getElementsByTagName("a");

    var buttonClick = function(e){
        alert(e.type);  
         var name = this.innerHTML.toLowerCase();
            txt.className = name;
        e.preventDefault();
    }
    
    for (var i = 0, len = buttons.length; i < len; i = i + 1) {
        //true for capturing (older browsers ie 8 and below)
        //false for bubbling (newer browsers)
        buttons[i].addEventListener("click", buttonClick, false);
        buttons[i].addEventListener("click", function(){
            alert("hi");
        }, false);
        
        //remove event listeners
        //must specify same parameters that were used
      //  buttons[i].removeEventListener("click", buttonClick, false);
        //cannot remove anonymous functions so the following will not work
        buttons[i].addEventListener("click", function(){
            alert("hi");
        }, false);
    }

}());