JS (자바스크립트) 이벤트 중단 & 이벤트객체와 Dataset

이벤트 중단

event객체의 preventDefault()함수는 문자 그대로 기본값을 방지한다는 뜻을 가지고있다

고유이벤트를 가지고 있는 태그들의 고유이벤트를 차단시키는 기능으로 

a태그나 submit등 페이지를 이동시키는 기능을 가지고 있는 태그들의 작동을 막아준다.

 

아래의 더보기에 preventDefault()를 사용한 예제가 있다.

event.preventDefault()를 사용해서 submit버튼의 기본이벤트를 중단했기 때문에 

submit버튼을 눌러도 입력된 값이 20이하면 이동하지않음

<form action="http://www.naver.com">
        <input type="text" name="age">
        <input type="submit" value="클릭" id="btn">
    </form>

    <script>
        var btn = document.getElementById("btn");
        var age = document.getElementsByName("age")[0];
        btn.onclick = function () {
            event.preventDefault();
            if (age.value >= 20) {      //20이상일때만 이동
                window.location.href = 'http://www.naver.com';
            }
        }
    </script>

submit버튼을 눌러도 입력된 값이 20이하면 이동하지않음

---

이벤트객체와 Dataset

Dataset는 태그에 데이터를 가지고 있도록 해주는 속성이다.

• 태그에 data -이름='값' 으로 선언한다
• 사용은 dataset.이름으로 할 수 있다.
• 값은 문자열로 작성하며, 객체형태로 작성한뒤 json.parse를 사용해 값을 불러올 수 있다.

아래의 더보기에 dataset을 활용한 예제가 들어있다.

<h3>태그의 dataset속성  = 태그의 저장소</h3>
    <!-- data-으로 시작하고, 뒤에오는 이름은 자유롭게 작성 가능하다 -->
    <ul class="list">
        <li><a href="#" data-user-info ='{"id": "1", "age": "10"}'>홍길동</a></li>
        <li><a href="#" data-user-info ='{"id": "2", "age": "20"}'>홍길자</a></li>
        <li><a href="#" data-user-info ='{"id": "3", "age": "30"}'>이순신</a></li>
        <li><a href="#" data-user-info ='{"id": "4", "age": "40"}'>박찬호</a></li>
    </ul>

    결과 : <div class="result"></div>
    <script>
        var list = document.querySelector(".list");
        var result = document.querySelector(".result");
        list.onclick = function(){
            event.preventDefault();
            if(event.target.tagName !="A") return;
            var data = event.target.dataset.userInfo;
            var re = JSON.parse(data);
            result.innerHTML= "id : " + re.id + " 나이 : "+ re.age;
        }
    </script>

저장된 값을 불러와서 data의 문자열 형식을 JSON형식으로 변경하고 re.키값으로 접근해서 출력함