JS | 이벤트 객체 — 개발 공부

이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어주게 되어있다.

첫번째 매개값으로 event객체를 넣어줌

이벤트 위임

이벤트 전파는 부모에 하나의 이벤트만 걸어 놓으면, 모든 이벤트가 동일하게 자식으로 위임되는 특징입니다.

위임은 많이 사용되는 강력한 이벤트 핸들링 패턴입니다.

이벤트 객체 사용하는 방법

이벤트 객체의 기능	설명
stopPropagation()	이벤트 전파를 막는다. (버블링 중단하기)
target	이벤트를 적용한 타겟 속성
currentTarget	실제 이벤트가 걸려있는 타겟 속성
preventDefault()	고유특성을 가진 태그의 이벤트를 제거 ㄴ a와 submit은 고유 이벤트를 가지고 있다.

this태그를 대체할 수 있다.

방법1 ) 매개값으로 받는다. (이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어주게 되어있다.)

보통 매개값을 e라고 적음

변수명.onclick = function(e){
	console.log(e);
}

방법2 ) event 키워드 사용

console.log(event);

target : 이벤트가 동작된 실제 태그

currentTarget : 이벤트가 실제로 걸려있는 위치

비효율적인 코드를 이벤트 객체를 이용해서 효율적인 코드로 만들어줄 수 있다.

- 비효율적인 코드

<h3>여러 이벤트를 한번에 걸어주기</h3>

    <ul>
        <li class="item">1.홍길동</li>
        <li class="item">2.홍길자</li>
        <li class="item">3.이순신</li>
        <li class="item">4.강감찬</li>
        <li class="item">5.둘리</li>
    </ul>

    선택한 태그의 값 : 
    <p class="result"></p>

    <script>
        var item = document.querySelectorAll('.item');
        var result = document.querySelector('.result');

        //아래의 방법은 비효율적인 방법입니다.- 태그 10000개 라면 ?
        //좋은 코드가 아닙니다. 
        for(var i = 0; i < item.length; i++){
            item[i].onclick = function(){
                console.log(this); 
                result.innerHTML = this.innerHTML;
            }
        }

        
    </script>

문제

이벤트 객체를 이용하여 효율적인 코드

예제 ) 클릭한 li태그의 값을 출력

<h3>이벤트 전파 특성 활용하기</h3>

    <ul class="parent">
        <li>1.홍길동</li>
        <li>2.홍길자</li>
        <li>3.이순신</li>
        <li>4.강감찬</li>
        <li>5.둘리</li>
    </ul>

    선택한 태그의 값 : 
    <p class="result"></p>

    <script>
        var result = document.querySelector('.result');

        //부모에 이벤트를 걸면 자식한테 이벤트가 전파됩니다.
        var parent = document.querySelector('.parent');

        parent.onclick = function(e){
            // console.log(this);//ul
            // result.innerHTML = this.innerHTML;
            
            //이벤트객체 - 이벤트함수에 첫번째 매개변수로 자동 전달됩니다.
            // console.log(e);
            // console.log(event);

            // console.log(event.target); //이벤트가 동작된 실제 태그 
            // console.log(event.currentTarget); //실제 이벤트가 걸려있는 태그

            if(e.target.tagName != 'LI') return; //li 태그가 아니라면 종료

            result.innerHTML = e.target.innerHTML;

        }

    </script>

실습1 ) 클릭한 사진을 출력

style ↓↓↓

<style>
        ul li {
            display: inline-block;
        }
    </style>

<h3>이벤트객체활용</h3>
    <div>
        <ul>
            <li><img src="img/1.jpg" alt="1" width="100"></li>
            <li><img src="img/2.jpg" alt="1" width="100"></li>
            <li><img src="img/3.jpg" alt="1" width="100"></li>
            <li><img src="img/4.jpg" alt="1" width="100"></li>
        </ul>
        결과:
        <div class="result">
            <img src="img/1.jpg" alt="결과" width="300" class="img" >
        </div>
    </div>

    <script>
       
       var ul = document.querySelector('ul');
       var imgg = document.querySelector('.img');

        ul.onclick = function(e){
            if(e.target.tagName!='IMG')return;
            imgg.src = e.target.src;
        }

    </script>

실습2 ) 이벤트위임을 활용한 삭제