https://github.com/codeadamca/javascript-mouse-events
A basic example of using JavaScript to connect mouse events to DOM changes.
https://github.com/codeadamca/javascript-mouse-events
javascript learning-code mouse-events
Last synced: 11 months ago
JSON representation
A basic example of using JavaScript to connect mouse events to DOM changes.
- Host: GitHub
- URL: https://github.com/codeadamca/javascript-mouse-events
- Owner: codeadamca
- Created: 2021-01-23T20:06:36.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:03:26.000Z (about 1 year ago)
- Last Synced: 2025-01-26T23:17:54.137Z (about 1 year ago)
- Topics: javascript, learning-code, mouse-events
- Language: HTML
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Basic Introduction to JavaScript and Mouse Events
Once you are comfortable with referencing different elements in the HTML document using the DOM (Document Object Model), the next step is to connect the manipulation of the elements in teh DOM to events. JavaScript has many events that can be connected to blocks of code:
1. onclick
2. ondblclick
3. onmousedown
4. onmousemove
5. onmouseout
6. onmouseover
## Example Event
If we had the following HTML document:
```html
The JavaScript DOM
The JavaScript DOM
Mauris convallis dictum odio. Quisque euismod finibus.
codeadam.ca
Click Me!
```
If we wanted to change the colour of the `h1` element when the `button` element is clicked, we would first create a reference to the button element:
```javascript
var button = document.getElementById('button');
```
And then add an event listener:
```javascript
button.addEventListener("click",function(){
document.getElementById("heading").styles.color = "red";
});
```
## Trying It Out
Create a new HTML document, add four `div` elements. Add the following four events and DOM manipulation:
1. Change the `background-colour` of the first `div` elements is clicked.
2. Change the `background-colour` of the second `div` element when the mouse enters.
3. Change the `background-colour` of the third `div` element when the mouse leaves.
4. Change the `background-colour` of the fourth `div` element when double clicked.
> Full tutorial URL:
> https://codeadam.ca/learning/javascript-mouse-events.html
***
## Repo Resources
* [Visual Studio Code](https://code.visualstudio.com/)
