JavaScript_이벤트 등록 처리

이벤트 등록 처리 - 이미지 변경하기 예제 1

<div class="f--container">
	<img src="../js/image1.png" style="width:200px; height:200px;" alt="">
	<br><br>
	<button onclick="changeImg()">이미지 변경하기</button>
</div>

<script>
    function changeImg() {
        let imageNode = document.querySelector("img");
        console.log(imageNode);
        imageNode.src="../js/image2.png";
    }
</script>

 

 

이벤트 등록 처리 - 이미지 변경하기 예제 2

<div class="">
    <form action="/account" method="get">
        <img src="../js/image1.png" style="width:200px; height: 200px;" alt="">
        <br><br>
        <button onclick="return false;" id="btn--change">이미지 변경하기</button>
    </form>
</div>

<script>
    let isImageChange = false;
    let btnChangeNode = document.querySelector("#btn--change");
    // .addEventListener("이벤트 유형", 함수, 캡처 여부(생략 가능));
    btnChangeNode.addEventListener("click", changeImg, false);
    btnChangeNode.addEventListener("mouseover", changeImg, false);
    btnChangeNode.addEventListener("mouseout", changeImg);
    
    function changeImg() {
        let imgNode = document.querySelector("img");
        
        if(isImageChange) {
            imgNode.src = "../js/image1.png";
        } else {
            imgNode.src = "../js/image2.png";
        }
        
        isImageChange = !isImageChange;
    }
</script>