반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

샐님은 개발중

3강 queryselector, 이벤트리스너(콜백함수) 본문

자바스크립트/인프런강의-렛츠기릿 자바스크립트

3강 queryselector, 이벤트리스너(콜백함수)

샐님 2023. 6. 19. 23:50
728x90
반응형

 

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="text" />
    <button>입력</button>
</body>
<script>
    // 변수명 앞에 $ : 태그 선택자 $$: 태그 여러개
    const $button = document.querySelector('button');
    // input , 즉 입력이라는 이벤트를 발생시킬 때마다 익명 함수를 호출시킨다.
    document.querySelector('input').addEventListener('input', function() {
        console.log("글자 입력");
    });
    document.querySelector('button').addEventListener('click', function() {
        console.log("버튼 클릭");
    });
    // 이런 함수를 콜백함수 또는 리스너함수 라고 부른다.
    // 태그.addEventListener('이벤트 이름', 리스너함수)


    // 함수를 변수로 지정해서 사용할 수 도 있다. 주의점 : onclick() x , onclick  :: onclick()은 함수를 호출하는것이기 때문에 undefined 가 return됨.
    // 결국   document.querySelector('button').addEventListener('click', onclick());
    //   document.querySelector('button').addEventListener('click', undefined); 가되기 때문에 에러발생
    const onclick = function() {
        console.log("버튼 클릭");

    };
    document.querySelector('button').addEventListener('click', onclick);
    // 화살표 함수도 사용가능 
    // * 익명함수와 화살표함수는 동작하는 방식에 있어서 차이가 
    // 약간 있지만 이건 9장에서 다룸. 현재는 차이 없음.
    const onCLick = () => {
            console.log('버튼 클릭');
        }
        // e 라는 이벤트의 객채에 값이 입력값이 된다.
    document.querySelector('input').addEventListener('input', (e) => {
        console.log(e.target.value);
    });
</script>

</html>

* javascript 복습용으로 듣고 있는 강좌입니다. 

인프런 - 레츠기릿 자바스크립트 by 제로초

728x90
반응형

'자바스크립트 > 인프런강의-렛츠기릿 자바스크립트' 카테고리의 다른 글

자바스크립트 - 끝말잇기(변수명,콜백함수,이벤트리스너)  (0) 2023.07.04
객체의비교(원시값과의차이점)  (0) 2023.07.04
객체 리터럴  (0) 2023.07.04
파라미터와인수  (0) 2023.07.04
함수  (0) 2023.07.04
'자바스크립트/인프런강의-렛츠기릿 자바스크립트' Related Articles more