JS (자바스크립트) Event Object

JS/JS (자바스크립트) ES5

JS (자바스크립트) Event Object

0304호 2023. 1. 3. 17:42

이벤트 객체

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

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

예시(비효율)

실제 li 태그가 많다면 비효율적인 코드가 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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 result = document.querySelector(".result");

        var item = document.querySelectorAll(".item");
        //이 방법은 아주아주아주 비효율적인 방법
        for(var i = 0 ; i < item.length; i++){
            item[i].onclick = function(){
                console.log(this);
                result.innerHTML = this.innerHTML.substring(2);
            }
        }

    </script>
</body>
</html>

결과(비효율)

리스트를 클릭하면 선택한 태그의 값에 선택한 값이 들어간다.

예시(효율)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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");//ul
        parent.onclick = function(e){
            // console.log(this);//ul
            // result.innerHTML =  this.innerHTML;

            //이벤트객체 - 이벤트 함수에 첫번째 매개변수로 자동전달
            // console.log(e);
            // console.log(event);

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

            if(e.target.tagName != "LI") return;//li 태그가 아니라면 종료
            result.innerHTML = e.target.innerHTML.substring(2);

        }


    </script>
</body>

</html>