aresnick/_mouse-event.md

## _mouse-event.md

      
    Raw
  

              _mouse-event.md
            
          
    A tiny example demonstrating how to use addEventListener to listen for mouse events in JavaScript

This is a tiny sketch demonstrating how to add some basic mouse interaction with an HTML element via JavaScript.  There is a small, accompanying screencast you can watch here.  Please let us know if you have any questions or issues!
Further doing

Modify the code so that:

…on mousedown the square changes color, and on mouseup it changes back
…each click changes the base color of the div
…a doubleclick rotates the div

Further reading


addEventListener's actual documentation on MDN
All the Events your browser knows how to listen for, along with the MouseEvents in particular.
A much more extensive tutorial on JavaScript events.
"What's the difference between addEventListener and onclick?"
MDN's tutorial on events


## mouse-event.html
<html>

<head>
<style>
#mySquare {
	width: 100px;
	height: 100px;
	background-color: lightblue;
}
</style>
</head>

<body>
	<div id='mySquare'></div>
    <script>

    var square = document.getElementById('mySquare'); // grab our #mySquare element and store it in a variable

    var changeColor = function(element, color) { // define a small function to let us change the color of an element
    	element.style.backgroundColor = color;
    };

    square.addEventListener('click', function() { changeColor(square, 'red'); }); // and add an event listener that changes the background-color of #mySquare to 'red' when we click
    </script>
</body>

</html>
	<html>

	<head>
	<style>
	#mySquare {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	}
	</style>
	</head>

	<body>
	<div id='mySquare'></div>
	<script>

	var square = document.getElementById('mySquare'); // grab our #mySquare element and store it in a variable

	var changeColor = function(element, color) { // define a small function to let us change the color of an element
	element.style.backgroundColor = color;
	};

	square.addEventListener('click', function() { changeColor(square, 'red'); }); // and add an event listener that changes the background-color of #mySquare to 'red' when we click
	</script>
	</body>

	</html>