자바스크립트

1
2
3
4
5
6
7
8
9

1. new image() 로 생성
var banana = new image();
banana.src = 'banana.png';
 
2.DOM 객체 선택 후 
var myimg = document.getElementById('myimg');
myimg.src = banana.src = 'banana.png';
 
 
Colored by Color Scripter

cs

A>이벤트 객체

-- 발생한 이벤트에 관련된 다양한 정보를 담은 객체.

-- 이벤트가 처리되면 이벤트 객체 소멸.

--이벤트 객체는 이벤트 리스너 함수의 첫번째 매개 변수에 전달됨

1. 이벤트 객체에 있는 정보

-- type = 현재 발생한 이벤트 종류

-- target = 이벤트 발생시킨 객체

-- currenTarget = 이벤트 리스너 실행하고 있는 DOM 객체

-- defaultPrevented = 이벤트 디폴트 행동이 취소되었는지 true / false 값

-- prevnetDefault() = 이벤트 디폴트 행동 취소시킴

2.디폴트 행동

특정 이벤트에 대한 html 태그의 기본 행동

예시

<a> 태그는 click 이벤트 발생시 웹페이지 이동

<submit> 은 click 이벤트 발생시 폼 데이터 전송

<input type='checkbox'> 는 click 이벤트 발생시 선택

3.디폴트 행동을 막는 방법

-- 전제 조건 : cancelable 프로퍼티가 true 일때

-- 이벤트 리스너에서 false 리턴

예시

-- prevnetDefault

4.이벤트 흐름

이벤트가 발생하면 window 객체에 먼저 도달하고,

DOM 트리를 따라 이벤트 타겟에 도착한다.

그리고 다시 정반대로 window 객체로 올라간 후 사라진다.

캡처 단계 : window -> 타겟

버블 단계 : 타겟 -> window

B> 이벤트 생성

1.HTML 태그 내에 작성

2.DOM 객체 이벤트 리스너 프로퍼티에 작성

3.DOM 객체 addEventListener() 이용

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
    var p ; 
    function init(){
        p =document.getElementById('p');
        p.onmouseover = over;
        p.onmouseout = out;
    }
    function over(){
        p.style.backgroundColor = 'orchid';
    }
    function out(){
        p.style.backgroundColor = 'white';
    }
</script>

cs

B>addEvenetListener()

예시1. addEventListener 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
var p ;     
function init(){
    p =document.getElementById('p');
    p.addEventListener('mouseover',over);//over() 로 하면 안된다.
    p.addEventListener('mouseout',out);
    }
    function over(){
        p.style.backgroundColor = 'orchid';
    }
    function out(){
        p.style.backgroundColor = 'white';
    }
</script>

cs

예시2 . 익명함수로 할 때

1
2
3
4
5
6
7
8
9
10
11
12

<script>
    var p ; 
    function init(){
        p =document.getElementById('p');
        p.addEventListener('mouseover',()=>{
            p.style.backgroundColor = 'orchid';
        });
        p.addEventListener('mouseout',()=>{
            p.style.backgroundColor = 'white';
        });
    }
</script>

cs

C> 캡쳐 리스너

-- 이벤트 등록시 캡쳐 리스너인지 버블 리스너인지 구분함

addEventListener('이벤트 종류',이벤트 함수 ,true) -- 캡처 리스너일시 true

addEventListener('이벤트 종류',이벤트 함수 ,true) -- 버블 리스너일시 false

D>마우스 핸들링

1.클릭 관련

-- x, y : 타겟 객체 부모 객체 내에서의 마우스 좌표

-- clientX, clientY : 브라우저 윈도우의 마우스 좌표

-- screenX, screenY : 스크린 기준의 좌표

-- button : 눌러진 마우스 버튼

-- 0 : 아무것도 안눌림

-- 1 : 좌클릭

-- 2 : 우클릭

-- 3 : 양클릭

-- 4 : 중간

-- wheelDelta : 마우스 휠이 구른 방향

-- 양수: 위쪽(120)

-- 음수: 아래쪽(-120)

2.이벤트 관련

-- onmousedown : 마우스 버튼을 누르는 순간

-- onmouseup : 눌러진 버튼이 놓여지는 순간

-- onmouseover : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함

-- onmouseout : 마우스가 태그 위로 올라오는 순간. 자식 영역 포함

-- onmouseenter : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음

-- onmouseleave : 마우스가 태그 위로 올라오는 순간. 버블 단계 없음

-- onwheel : HTML 태그에 마우스 휠이 구르는 동안 계속 호출

3.context menu

context menu : html 태그 위에 마우스 오른쪽 버튼 클릭 시 나오는 항목

우클릭을 하면

oncontextmenu 리스너가 먼처 호출된다.

document.oncontextmenu = function(){

return false; // 컨텍스트 메뉴 금지

}

E>onload

window 객체에서 발생

웹 페이지 로딩 완료시 호출

1.작성 방법

window.onload= function()

2.이미지 로딩 완료

--동적으로 이미지 생성

1
2
3
4
5
6
7
8
9

1. new image() 로 생성
var banana = new image();
banana.src = 'banana.png';
 
2.DOM 객체 선택 후 
var myimg = document.getElementById('myimg');
myimg.src = banana.src = 'banana.png';
 
 
Colored by Color Scripter

cs

F>focus

onblur : 포커스를 잃을 때 발생

onfocus : 포커스를 얻을 때 발생

G>라디오 버튼

document.getElementById() 로 가지고 오면 배열값을 리턴.

선택이 되었다면 true

체크박스도 마찬가지

선택 되었다면 true

H> select 객체와 onchage

1
2
3
4
5
6

<select id="fruits">
    <option value="1">딸기</option>
    <option value="2" selected>바나나</option>
    <option value="3">사과</option>
</select>

일때

var select =document.getElementById('fruits');
var index =select.selectedIndex; 
--선택된 옵션의 인덱스

//옵션 선택
select.selectedIndex =2;
select.options[2].selected = true;

//혹은 onchange 리스너 사용
<select id="fruits" onchange="drawImage()">...</select>
 
Colored by Color Scripter

cs

 

I>키 이벤트

onkeydown : 키가 눌러지는 순간 호출

onkeypress : 문자키와 enter, esc, space 가 눌러질때 호출

onkeyup : 눌러진 키가 떨어질때 호출

J> onreset 과 onsubmit

onreset : reset 버튼 눌릴때

false 를 리턴하면 리셋 안된다.

onsubmit : submit 버튼 눌릴때

false 를 리턴하면 리셋 안된다.

'언어 > javascript' 카테고리의 다른 글

javascipt - 웹 워커(web worker) (0)	2021.02.15
BOM (0)	2021.02.15
자바 스크립트 - 객체 생성과 prototype (0)	2021.02.08
자바스크립트 - 함수와 스코프 (0)	2021.02.08
자바 스크립트 기본 제어문2 (0)	2021.02.08

프로그램잉

자바스크립트 - 이벤트

'언어 > javascript' 카테고리의 다른 글

티스토리툴바

자바스크립트 - 이벤트

'언어 > javascript' 카테고리의 다른 글

'언어/javascript' Related Articles

티스토리툴바