Practice Set, Week 9, Event Handling and Bubbling

by rachelmc_

HTML

<h2>Event Handlers and How They Handle Events</h2>
    <p>Javascript events are what make things happen to HTML elements. </p>
    <p>The most basic event is <strong>.onclick</strong></p>
    <p>Click on the button below to see what onlick can do.</p>
<div id="divExample">
    <h2 id="divContent"></h2>
    <p id=divContent2></p>
    <button id="divBtn">Click me!</button>
    <p id="colorEx"><strong>onclick</strong> can also change the style of elements too
    </p>
    <button id="divBtn2">See what happens!</button>

</div>
<div id="divExample2">
    <h3>
    Another common event is <strong>onmouseover</strong> and <strong>mouseout</strong>.  
    </h3>
        <p id="box">
        When the mouse is hovering over an element, we can have a function change it and when the mouse if off the element, it can change again. Hover your mouse over this text to see what happens. 
        </p>
   
</div>

CSS

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

#divContent {
    color: red;
}

#divContent2 {
    font-style: italic;   
}

#divExample {
     
}

JavaScript

//.onclick event
//When we click on the button, it is going to display text content in the parent div. 

document.getElementById("divBtn").onclick = function(){ //Here we get the button by it's id and give it a function so that when we click on it, it carries out the instructions in the function.
		document.getElementById("divContent").innerText = "Content appears!";//The first thing our function is goign to do is get the h2 element and put text in it.
		document.getElementById("divContent2").innerText = "Read more about how this function works in the Javascript panel below";//Then our function will do the same to our p element.
    
}

document.getElementById("divBtn2").onclick = function(){ //here we are saying that when the divBtn2 button is clicked, it's p element (the text) will turn blue.
		document.getElementById("colorEx").style.color = "blue";
}

//mouseover
document.getElementById("box").onmouseover = function() {mouseOver()};
document.getElementById("box").onmouseout = function() {mouseOut()};

function mouseOver() {
    document.getElementById("box").style.color = "green";
}

function mouseOut() {
    document.getElementById("box").style.color = "black";
}