[1일1코딩][JS] addEventListener & removeEventListener

 

이벤트 추가 : addEventListener

이벤트 삭제 : removeEventListener

 

addEventListener(연결이벤트, 실행할 함수)

 

 

마우스가 버튼에 올라가면 올라갔다고 콘솔로그 뜨고 클릭하면 클릭했다고 뜨고

클릭 후 이벤트가 삭제되면서 mouseover만 작동하고 click은 지우는 js코드 연습

 

 

    <h3>addEventListener</h3>
    <div id="first" class="div0"></div>
    <button id="do1">do1 확인</button>
    <button id="do2">do2 확인</button>
    <script>
        var do1 = document.getElementById('do1');
        var do2 = document.getElementById('do2');
        // var div0 = document.getElementByClass('div0');

        function dodo1_1(){
            console.log("click");
        }
        function dodo1_2(){
            console.log("in");
        }   
        function div0_1(){
            console.log("dvi0");
            div0.innerText = "hi";

        }

        do1.addEventListener('click',dodo1_1);
        do1.addEventListener('mouseover',dodo1_2);

        do2.addEventListener('click',function(){
            console.log('do2 실행. 제거하기');
            do1.removeEventListener('click',dodo1_1);

        // div0.addEventListener('click',div0_1);

        })

    </script>