Content being updated

DOM EventListeners and Navigation

The addEventListener() method

We have used DOM events previously by adding listeners directly in the html element. However, in order to totally separate the HTML from the JavaScript code, it is better practice to add the event Listener inside the JavaScript code by using the addEventListener() method. This improves separation of concerns, readability and allows you to add the event listeners and effects even if you do not have control over the HTML code.

The addEventListener() method attaches an event handler to a specified element. It will not overwrite existing event handlers on that element, so it is possible to add many event handlers to one element, including more than one identical event handler (e.g. you can add two click event listeners to the same element). The other advantage of using the addEventListener() method, is that you get control of the event bubbling (how the event propagates through the DOM nodes).

You can remove an event listener by using the removeEventListener() method.

Syntax

element.addEventListener(event, function, useCapture);

Where:

• element is the element on which we add the eventListener
• event is the event that we are listening for
• function is the function that gets called when the event is triggered. This can be a defined function or an annonymous function.
• useCapture is a boolean that specifies whether we use the event bubbling (false, also default option) or event capturing (true). This parameter is optional.

Event Propagation

By default, events bubble up the DOM tree. This means that if you have a <p> inside a <div>, and you click inside the <p>, the click event inside the <p> gets handled first (the inner most element). The event propagates by bubbling up to the <div>, and the click event attached to the <div> then gets handled.

By using useCapture, you can force the event propagation the other way round, ie by starting from the outermost element. This means that if you set useCapture to true, the click event attached to the <div> would get handled first, followed by the click event attached to the <p>.

<div id="turnPurple" style="height:150px; width:150px; border: solid thin black; margin: 10px; float: left;">Click Me I'll turn purple
</div>
<div id="clearPurple" style="height:150px; width:150px; border: solid thin black; margin: 10px; float: left;">Click Me to clear purple
</div>
<script>
document.getElementById( "turnPurple" ).addEventListener( "click", function() {
		document.getElementById( "turnPurple" ).style.backgroundColor = "purple";
});
document.getElementById( "clearPurple" ).addEventListener( "click", function() {
		document.getElementById( "turnPurple" ).style.backgroundColor = "white";
});
</script>

element.removeEventListener("mousemove", myFunction);

<div id="turnPurple2" style="height:150px; width:150px; border: solid thin black; margin: 10px; float: left;">Click Me I'll turn purple
</div>
<div id="clearPurple2" style="height:150px; width:150px; border: solid thin black; margin: 10px; float: left;">Click Me to clear purple
</div>
<script>
function turnPurpleDivTextPink() {
	document.getElementById( "turnPurple2" ).style.color = "pink";
}

function turnPurpleDivPurple() {
	document.getElementById( "turnPurple2" ).style.backgroundColor = "purple";
}

function stopTurningPurpleDivPurple() {
	document.getElementById( "turnPurple2" ).style.backgroundColor = "white";
	document.getElementById( "turnPurple2" ).style.color = "black";
	document.getElementById( "turnPurple2" ).innerHTML = "I can no longer turn purple";
	document.getElementById( "turnPurple2" ).removeEventListener( "click", turnPurpleDivPurple );
}

document.getElementById( "turnPurple2" ).addEventListener( "click", turnPurpleDivPurple );
document.getElementById( "turnPurple2" ).addEventListener( "click", turnPurpleDivTextPink );
document.getElementById( "clearPurple2" ).addEventListener( "click", stopTurningPurpleDivPurple);
</script>