유블로그

[JavaScript] 다양한 이벤트 처리 방식 본문

JavaScript & jQuery

[JavaScript] 다양한 이벤트 처리 방식

yujeong kang 2020. 9. 12. 12:17

방법 1: element에 onclick="" 으로 함수 호출

<body>
    <button id="btn1" onclick="fn1()">버튼1</button>    
    <script>
        function fn1() {
            console.log("fn1 호출");
        }
    </script>
</body>

 

방법 2: document.getElement~~ 로 elment 받아와서 함수 정의

<body>
    <button id="btn1" onclick="fn1()">버튼1</button>    
    <script>
        let btn1 = document.getElementById("btn1");
        btn1.onclick = function() {
            console.log("fn1 호출");
        }
    </script>
</body>

 

 

만약 방법1과 방법2를 동일한 element에 주면 밑에 나온 function이 호출된다!!

 

 

방법 3: element.addEventListener(이벤트종류, 수행할함수)

<body>
    <button id="btn1">버튼1</button>    
    <script>
        let btn1 = document.getElementById("btn1");
        btn1.addEventListener("click", function() {
            console.log("버튼1 클릭");
        });
    </script>
</body>

 

방법 3은 방법1이나 방법2와 중복으로 이벤트처리해도 둘 다 처리됨! 

동일한 element에 여러 .addEventListener("click" ~~~ 해도 다 적용됨

 

 

+ 다른 element 에 동일한 이벤트 처리

<body>
    <button id="btn1" onclick="fn1()">버튼1</button>    
    <button id="btn2">버튼2</button>
    <script>
        function fn1() {
            console.log("fn1 호출");
            // console.log(this);   // fn1에 대한 상위객체: window(document는 window의 멤버변수)
        }

        let btn1 = document.getElementById("btn1");
        btn1.addEventListener("click", function() {
            console.log("버튼1 클릭");
        });

        let btn2 = document.getElementById("btn2");
        btn2.onclick = fn1;
    </script>
</body>

btn2를 눌러도 fn1호출이라고 console에 출력됨

저작자표시 비영리 변경금지

'JavaScript & jQuery' 카테고리의 다른 글

[JavaScript & jQuery] this : 순수자바스크립트 객체와 jQuery 객체 변형  (0) 2020.09.12
[jQuery] 다양한 이벤트 처리 방식  (0) 2020.09.12
[JavaScript] 이벤트 종류  (0) 2020.09.12
[JavaScript] .innerHTML 로 내용 확인하고 변경하기  (0) 2020.09.12
[JavaScript] document.~ 으로 element 찾고 변경하기  (0) 2020.09.12
'JavaScript & jQuery' Related Articles more