본문 바로가기
2019/JavaScript

JS addEventListener 연습

by SOLYI 2019. 12. 9.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
        }
        li a{
            display: inline-block;
            padding: 5px 20px;
            border: 1px solid silver;
            color:darkblue;
            text-decoration: none; /*링크 밑줄없애기*/
        }
    </style>
    <script src="style/6_event.js"></script>
    
</head>
<body>
    <ul>
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
        <li><a href="#">메뉴4</a></li>
    </ul>
</body>
</html>
 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload=function(){
    let elea = document.getElementsByTagName('a');
    for(let i=0; i<elea.length; i++){
        elea[i].addEventListener('focusin'function(){
            this.style.backgroundColor='yellow';
        });
        elea[i].addEventListener('mouseover'function(){
            this.style.backgroundColor='yellow';
        });
        elea[i].addEventListener('focusout',function(){
            this.style.backgroundColor='gray';
        });
        elea[i].addEventListener('mouseout'function(){
            this.style.backgroundColor='gray';
        });
        
    }
}
 
반응형

'2019 > JavaScript' 카테고리의 다른 글

JS addEventListner 이용해서 checkbox 전체선택  (0) 2019.12.09
JS onchange  (0) 2019.12.09
JS create Element  (0) 2019.12.09
JS add Event Listener (set Attribute)  (0) 2019.12.09
JS getElement  (0) 2019.12.09