CHAT GPT가 골라준 자바스크립트 기능들

자바스크립트에서 자주 쓰이는 이벤트들을 알려달라고 했다.

 

CHAT GPT의 답변 :

JavaScript에서 자주 사용되는 이벤트 중 일부를 아래에 나열하겠습니다. 이러한 이벤트들은 웹 애플리케이션을 상호작용 가능하게 만드는 데 중요합니다.

1. click: 요소를 클릭할 때 발생하는 이벤트. 버튼, 링크 등을 클릭할 때 사용됩니다.
2. mouseenter/mouseleave: 마우스가 요소에 들어가거나 나갈 때 발생하는 이벤트. 주로 마우스 호버 효과를 구현하는 데 사용됩니다.
3. keydown/keyup: 키보드의 키가 눌렸을 때 (keydown) 또는 떼어졌을 때 (keyup) 발생하는 이벤트. 주로 키보드 단축키나 입력 검증 등에 사용됩니다.
4. submit: <form> 요소가 제출될 때 발생하는 이벤트. 주로 폼 데이터를 서버로 전송하기 전에 검증하는 데 사용됩니다.
5. load: 웹 페이지나 이미지 등이 로드될 때 발생하는 이벤트. 주로 이미지나 외부 스크립트 등을 로딩하는 데 사용됩니다.
6. resize: 브라우저 창의 크기가 변경될 때 발생하는 이벤트. 반응형 웹 디자인을 구현할 때 사용됩니다.
7. scroll: 웹 페이지가 스크롤될 때 발생하는 이벤트. 무한 스크롤, 스크롤 맨 위로 이동하기 등에 사용됩니다.
8. focus/blur: 요소가 포커스를 받거나 잃을 때 발생하는 이벤트. 주로 폼 요소나 입력란에 사용자의 입력을 처리하는 데 사용됩니다.
9. change: <input>, <select>, <textarea> 등의 요소 값이 변경될 때 발생하는 이벤트. 주로 폼 요소의 값 변경을 감지하는 데 사용됩니다.
10. contextmenu: 마우스 오른쪽 버튼을 클릭하면 발생하는 이벤트. 컨텍스트 메뉴나 커스텀 팝업 메뉴에 사용됩니다.
11. mouseenter/mouseleave: 마우스가 요소 위로 들어오거나 나갈 때 발생하는 이벤트. 주로 호버 효과나 팝업 툴팁 표시 등에 사용됩니다.
12. touchstart/touchend: 터치 기반 디바이스에서 사용자의 터치 동작을 감지하기 위한 이벤트.
13. drag/dragstart/dragend/dragover/dragleave/drop: 요소 드래그 앤 드롭 이벤트. 요소를 드래그하고 놓을 때 발생합니다.
14. animationstart/animationiteration/animationend: CSS 애니메이션 이벤트. 애니메이션이 시작, 반복, 종료될 때 발생합니다.
15. DOMContentLoaded: 페이지의 초기 HTML 문서가 완전히 로드되고 파싱될 때 발생하는 이벤트. 주로 초기화 코드를 실행하는 데 사용됩니다.

자바스크립트 사실 바닐라 잘 안 쓰고 제이쿼리로 하니까 제이쿼리로 다시 써달라고 했다.

 

1. click :

$(document).ready(function() {
    $("button").click(function() {
        // 클릭 이벤트 핸들러
    });
});

 

2. mouseenter/mouseleave :

$(document).ready(function() {
    $("element").mouseenter(function() {
        // 마우스가 요소에 들어갔을 때 실행할 코드
    });

    $("element").mouseleave(function() {
        // 마우스가 요소에서 나갔을 때 실행할 코드
    });
});

 

 

3. keydown/keyup :

$(document).ready(function() {
    $(document).keydown(function(event) {
        // 키보드 키 다운 이벤트 핸들러
    });

    $(document).keyup(function(event) {
        // 키보드 키 떼기 이벤트 핸들러
    });
});

 

4. submit :

$(document).ready(function() {
    $("form").submit(function(event) {
        event.preventDefault(); // 폼 제출 방지
        // 제출 이벤트 핸들러
    });
});

 

5. load :

$(window).on("load", function() {
    // 페이지나 이미지 등이 로드된 후 실행할 코드
});

 

6. resize :

$(window).on("resize", function() {
    // 브라우저 크기가 변경될 때 실행할 코드
});

 

7. scroll :

$(window).on("scroll", function() {
    // 스크롤 이벤트 핸들러
});

 

 

8. focus/blur :

$(document).ready(function() {
    $("input").focus(function() {
        // 포커스 이벤트 핸들러
    });

    $("input").blur(function() {
        // 포커스가 해제될 때 실행할 코드
    });
});

 

9. change :

$(document).ready(function() {
    $("select, input[type='checkbox'], input[type='radio']").change(function() {
        // 변경 이벤트 핸들러
    });
});

 

10. contextmenu :

$(document).ready(function() {
    $("element").on("contextmenu", function(event) {
        event.preventDefault(); // 컨텍스트 메뉴 무시
        // 컨텍스트 메뉴 이벤트 핸들러
    });
});