Commit 4d73be9

committed

DOM-Event-Listener

1 parent ce1c82b commit 4d73be9Copy full SHA for 4d73be9

File tree

+73

-0

lines changed

+73

-0

lines changed

Lines changed: 10 additions & 0 deletions

4.15 KB

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>DOM Event Listner</title>`
	`9`	`+ <link rel="stylesheet" href="css/style.css">`
	`10`	`+</head>`
	`11`	`+`
	`12`	`+<body>`
	`13`	`+ <h1>DOM Event Listener</h1>`
	`14`	`+ <h2>Example One</h2>`
	`15`	`+ <div id="exampleOne">`
	`16`	`+ <h2>OnClict Event</h2>`
	`17`	`+ </div>`
	`18`	`+ <h2>Example Two</h2>`
	`19`	`+ <div id="exampleTwo">`
	`20`	`+ <h2>On Mouse Over</h2>`
	`21`	`+ </div>`
	`22`	`+ <h2>Example Three</h2>`
	`23`	`+ <div id="exampleThree">`
	`24`	`+ <h2>On Mouse Out</h2>`
	`25`	`+ </div>`
	`26`	`+ <script src="script.js"></script>`
	`27`	`+</body>`
	`28`	`+`
	`29`	`+</html>`

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+// Example One`
	`2`	`+let exampleOne = document.getElementById('exampleOne');`
	`3`	`+`
	`4`	`+exampleOne.addEventListener("click", () => {`
	`5`	`+ exampleOne.style.backgroundColor = "Green";`
	`6`	`+ exampleOne.style.color = "white";`
	`7`	`+});`
	`8`	`+`
	`9`	`+`
	`10`	`+// Example Two`
	`11`	`+let exampleTwo = document.getElementById('exampleTwo');`
	`12`	`+`
	`13`	`+exampleTwo.addEventListener("mouseover", () => {`
	`14`	`+ exampleTwo.style.backgroundColor = "Blue";`
	`15`	`+ exampleTwo.style.color = "White";`
	`16`	`+});`
	`17`	`+exampleTwo.addEventListener("mouseout", () => {`
	`18`	`+ exampleTwo.style.backgroundColor = "white";`
	`19`	`+ exampleTwo.style.color = "Green"`
	`20`	`+});`
	`21`	`+`
	`22`	`+// Example Three`
	`23`	`+`
	`24`	`+let exampleThree = document.getElementById('exampleThree');`
	`25`	`+`
	`26`	`+exampleThree.addEventListener("mouseover", () => {`
	`27`	`+ exampleThree.style.backgroundColor = "purple";`
	`28`	`+ exampleThree.style.Color = "white";`
	`29`	`+})`
	`30`	`+`
	`31`	`+exampleThree.addEventListener("mouseout", () => {`
	`32`	`+ exampleThree.style.backgroundColor = "white";`
	`33`	`+ exampleThree.style.color = "purple";`
	`34`	`+})`

Comments

(0)