JS-DOM이벤트

쁘띠경·2024년 8월 6일

js

목록 보기
34/41

DOM에서 이벤트 처리하기

DOM이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.
즉, 클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나
태그위에 마우스를 올리는 등 모든 행위를 '이벤트'라고 한다.

자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handle)를
연결해야한다.
html태그에 직접 이벤트 핸들러를 연결시킬수도 있지만 태그와 스크립트
소스가 섞여 있어 복잡한 프로그램에는 적합하지 않다.
이럴때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와
스크립트 소스를 완전히 분리시킬 수 있다.

    [기본형]
    요소명.on이벤트명 =function(){자바스크립트 코드;}


html



이미지를 클릭하면 창이 뜬다.




누르면 alt가 뜸


[기본형]
1. 해당하는 요소에 이벤트를 직접 적용하기.

    --------------------------------------
    요소명.on이벤트명 =function(){자바스크립트 코드;}
     : 위 기본형은 해당 요소의 이벤트 1개를 직접 적용할때 사용한다.
        다른 태그에는 해당 이벤트를 적용할 수 없다.

    2. 이벤트를 함수명을 이용해서 연결하기
    ------------------------------------
    변수명1=요소선택
    변수명1. 이벤트명= 함수호출; ,_소괄호 x

    변수명1=변수명.함수호출();
    function 이벤트명(){
    자바스크립트 코드;
    }
    :이벤트를 함수로 등록한다.
    이 이벤트는 여러 태그에 동시에 적용할 수 있다.
    
   
    -이벤트명은 = 클릭하면 실행해라
    -요소명은 = 도큐먼트 ~~
profile
안녕하세요 ! 발전을 위해 매일 도전하는 퍼블리셔 류영경입니다.

0개의 댓글