실습문제 9-1
WEB/TRAINNING 2017. 12. 4. 09:16 |1. 브라우저 내의 아무곳이나 클릭하면 왼쪽 화면과 같고, 브라우저 바깥의 아무 곳에 마우스를 클릭하면 브라우저의 배경색이 lightgray로 바뀌도록 웹 페이지를 작성하라.
힌트 - 브라우저 바깥에 마우스를 클릭하면 브라우저의 window 객체는 포커스를 잃게 되어 blur 이벤트가 발생한다.
window 객체에 onblur 리스너를 작성하면된다.
(포커스를 가지고 있는 상태)
(포커스를 잃게 되는 경우)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>onblur와 onfocus</title> <script> window.onblur = function(e) { document.body.style.backgroundColor = "lightgray"; } window.onfocus = function(e) { document.body.style.backgroundColor = "white"; } </script> </head> <body> <h3>포커스와 onblur,onfocus</h3> <hr> <p> 브라우저 바깥에 마우스를 클릭하면 window 객체에 blur 이벤트가 발생하고 다시 마우스를 클릭하면 window 객체에 focus 이벤트가 발생한다. </body> </html> | cs |