Commit c677a4e

committed

Event

1 parent cc5876d commit c677a4eCopy full SHA for c677a4e

File tree

+59

-0

lines changed

+59

-0

lines changed

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+function sayHello () {`
	`2`	`+ alert('Hello Class')`
	`3`	`+}`
	`4`	`+`
	`5`	`+// var btn = document.getElementById('helloBtn')`
	`6`	`+`
	`7`	`+// btn.addEventListener('click', function () {`
	`8`	`+// alert('Hello Class')`
	`9`	`+// })`
	`10`	`+`
	`11`	`+// btn.addEventListener('mouseover', function () {`
	`12`	`+// console.log(btn.id)`
	`13`	`+// btn.style.backgroundColor = 'blue'`
	`14`	`+// btn.style.color = 'white'`
	`15`	`+// })`
	`16`	`+`
	`17`	`+// btn.addEventListener('mouseout', function () {`
	`18`	`+// btn.style.backgroundColor = 'white'`
	`19`	`+// btn.style.color = 'black'`
	`20`	`+// })`
	`21`	`+`
	`22`	`+var cow_img = document.getElementById('cow_img')`
	`23`	`+console.log(cow_img)`
	`24`	`+`
	`25`	`+cow_img.addEventListener('mouseover', function () {`
	`26`	`+ console.log('this==>', this)`
	`27`	`+ this.src =`
	`28`	`+ 'https://images.unsplash.com/photo-1755129307402-667c73e44703?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxNHx8fGVufDB8fHx8fA%3D%3D'`
	`29`	`+ this.style.borderRadius = '100%'`
	`30`	`+})`
	`31`	`+`
	`32`	`+cow_img.addEventListener('mouseout', function () {`
	`33`	`+ this.src =`
	`34`	`+ 'https://images.unsplash.com/photo-1755127803263-bffee0361cfc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D'`
	`35`	`+})`

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`7`	`+ <title>Event Listener</title>`
	`8`	`+</head>`
	`9`	`+`
	`10`	`+<body>`
	`11`	`+ <!-- <h1>Event Listeners</h1> -->`
	`12`	`+`
	`13`	`+ <!-- <button onclick="alert('Hello Class')">Hello</button> -->`
	`14`	`+ <!-- <button onclick="sayHello()">Hello</button> -->`
	`15`	`+ <!-- <button id="helloBtn">Hello</button> -->`
	`16`	`+`
	`17`	`+ <div style="height: 300px; width: 300px; margin: 0px auto; margin-top: 20px">`
	`18`	`+ <img id="cow_img" style="height: 100%; width: 100%; cursor: pointer;"`
	`19`	`+ src="https://images.unsplash.com/photo-1755127803263-bffee0361cfc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D" />`
	`20`	`+ </div>`
	`21`	`+ <script src="app.js"></script>`
	`22`	`+</body>`
	`23`	`+`
	`24`	`+</html>`

Comments

(0)