CafeM0ca

[JS]이벤트 본문

Programming/JavaScript (Mocha)

[JS]이벤트

M0ca 2017. 11. 2. 10:27
반응형

이벤트는 무언가 발생하는 '때'이다.

이벤트 핸들러는 이벤트를 프로그램과 연결해주는 것

1
2
3
4
5
6
7
8
<!DOCTYPE>
<html>
<body>
    <input type="button" onclick="alert("hi")
 value="click to this!" />
</body>
</html>
 
cs

click to this!라는 버튼이 생성되고 버튼을 누르면 hi가 출력된다.


이벤트 방식


인라인

태그안에 정해진 속성으로 값을 줘서 이벤트를 설치하는 방식

this를 활용해서 동작하고 있는 이벤트에 편하게 접근할 수 있다.

1
<input type="button" onclick="alert('hello world, '
+'this.value);" value="button" />


cs


프로퍼티 리스너

이벤트 객체의 프로퍼티로(객체의 변수로) 이벤트를 등록하는 방식

반복해서 사용이 불가능하다.(이전 이벤트가 실행되지 않고 사라짐)

 

1
2
3
4
5
6
<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(){
        alert('hi');
</script>
cs


이벤트 객체

이벤트가 실행될 때 이벤트 헨들러의 인자로 전달됨 -> 실행된 이벤트의 다양한 정보를 얻을 수 있다.

1
2
3
4
5
6
7
<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(event){
        alert('Hi '+event.target.value)
    }
</script>
cs


addEventListenr

여러개의 이벤트 핸들러를 등록할 수 있다. 반복하여 사용 가능! (가능하면 이 방식쓰자)

1
2
3
4
5
6
7
<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click','space', function(event){
        alert('hi, '+event.target.value);
    });
</script>

cs

버튼을 click을 눌러도되고 space를 눌러도 된다.


이벤트의 동작 취소

inline과 property방식에서는 리턴값이 false면 취소되는데 

(주로 쓰는)addEventListener방식에서는 preventDefault메소드를 실행하면 취소된다.



★이벤트 (폼)종류. 핸들러 앞에는 on이 붙는다. (ex: onclick)

blur  포커스를 다른곳으로 옮길 경우 

click 링크나 폼의 구성원을 클릭할 때 
change 선택값을 바꿀 경우 
focus 포커스가 위치할 경우 
mouseover 마우스가 올라올 경우 
mouseout 마우스가 떠날 경우 
mousedown 마우스를 누를 경우 
mousemove 마우스를 움직일 경우 
mouseup 마우스를 눌렀다 놓을 경우 
select  입력양식의 하나가 선택될 때 
submit  폼을 전송하는 경우 
load 페이지,윈도우가 브라우져로 읽혀질 때 
unload 현재의 브라우저,윈도우를 떠날 때 
error 문서나 이미지에서 에러를 만났을 때 
reset 리셋 버튼이 눌렸을 때 
dbclick 더블클릭시 
dragdrop 마우스 누르고 움직일 경우 
keydown 키 입력시 
keypress 키 누를 때 
keyup 키를 누르고 놓았을 때 
move 윈도우나 프레임을 움직일 때 
resize 윈도우나 프레임 사이즈를 움직일 때
출처: http://cofs.tistory.com/190 [CofS]


이벤트를 다루는 중요한 것들이다.



반응형

'Programming > JavaScript (Mocha)' 카테고리의 다른 글

[종합실습세트] git/jest/jenkins/eslint,prettier  (0) 2020.12.05
[JS] 버블링과 캡쳐링(이벤트 전파)  (0) 2017.11.03
[JS] Document,Text 객체  (0) 2017.11.01
[JS] js로 웹제어  (0) 2017.10.31
[JS] 클로저 , arguments  (0) 2017.10.27
'Programming/JavaScript (Mocha)' Related Articles more
Comments