{"id":26871240,"url":"https://github.com/codeadamca/javascript-mouse-events","last_synced_at":"2025-03-31T07:18:52.301Z","repository":{"id":115328261,"uuid":"332298061","full_name":"codeadamca/javascript-mouse-events","owner":"codeadamca","description":"A basic example of using JavaScript to connect mouse events to DOM changes.","archived":false,"fork":false,"pushed_at":"2025-01-26T22:03:26.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T23:17:54.137Z","etag":null,"topics":["javascript","learning-code","mouse-events"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeadamca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-23T20:06:36.000Z","updated_at":"2025-01-26T22:03:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"38ec7e76-0f5c-4f70-8561-5fe59057bb46","html_url":"https://github.com/codeadamca/javascript-mouse-events","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-mouse-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-mouse-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-mouse-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeadamca%2Fjavascript-mouse-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeadamca","download_url":"https://codeload.github.com/codeadamca/javascript-mouse-events/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429486,"owners_count":20775809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","learning-code","mouse-events"],"created_at":"2025-03-31T07:18:51.803Z","updated_at":"2025-03-31T07:18:52.286Z","avatar_url":"https://github.com/codeadamca.png","language":"HTML","readme":"# A Basic Introduction to JavaScript and Mouse Events\n\nOnce 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:\n\n1. onclick\n2. ondblclick\n3. onmousedown\n4. onmousemove\n5. onmouseout\n6. onmouseover\n\n## Example Event\n\nIf we had the following HTML document:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eThe JavaScript DOM\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003ch1 id=\"heading\"\u003eThe JavaScript DOM\u003c/h1\u003e\n\n  \u003cp id=\"paragraph\"\u003eMauris convallis dictum odio. Quisque euismod finibus.\u003c/p\u003e\n\n  \u003ca id=\"link\" href=\"https://codeadam.ca\"\u003ecodeadam.ca\u003c/a\u003e\n  \n  \u003cbutton id=\"button\"\u003eClick Me!\u003c/button\u003e\n    \n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf 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:\n\n```javascript\nvar button = document.getElementById('button');\n```\n\nAnd then add an event listener:\n\n```javascript\nbutton.addEventListener(\"click\",function(){\n  document.getElementById(\"heading\").styles.color = \"red\";\n});\n```\n\n## Trying It Out\n\nCreate a new HTML document, add four `div` elements. Add the following four events and DOM manipulation:\n\n1. Change the `background-colour` of the first `div` elements is clicked.\n2. Change the `background-colour` of the second `div` element when the mouse enters.\n3. Change the `background-colour` of the third `div` element when the mouse leaves.\n4. Change the `background-colour` of the fourth `div` element when double clicked.\n\n\u003e Full tutorial URL:  \n\u003e https://codeadam.ca/learning/javascript-mouse-events.html\n\n***\n\n## Repo Resources\n\n* [Visual Studio Code](https://code.visualstudio.com/)\n\n\u003cbr\u003e\n\u003ca href=\"https://codeadam.ca\"\u003e\n\u003cimg src=\"https://cdn.codeadam.ca/images@1.0.0/codeadam-logo-coloured-horizontal.png\" width=\"200\"\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fjavascript-mouse-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeadamca%2Fjavascript-mouse-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeadamca%2Fjavascript-mouse-events/lists"}