JavaScript - 이벤트
<!DOCTYPE html><html><body> <input type="button" onclick="alert(window.location)" value="alert(window.href)" /> <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" /></body></html>event target
->target은 이벤트가 일어날 객체를 의미한다.
event type
->이벤트의 종류를 의미한다.
(https://developer.mozilla.org/en-US/docs/Web/Reference/Events)
event handler
-> 이벤트가 발생했을 때 동작하는 코드를 의미한다.
위의 예제에서는 alert(window.location)이 여기에 해당한다.
출처 : https://opentutorials.org/module/904/6629
** 이벤트 등록방법
1. inline : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.<input type="button" onclick="alert('Hello world');" value="button" />
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />
2. property listener :
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
event 객체에는 여러가지 정보가 담겨있다!!(console.dir(event); 확인)
<body> <input type="button" id="target" value="button" /><script> var t = document.getElementById('target'); t.onclick = function(event){ alert('Hello world, '+event.target.value) }</script>// I.E 8이하 버젼 호환을 위해서는 아래와 같이 추가 예외처리 필요
<input type="button" id="target" value="button" /><script> var t = document.getElementById('target'); t.onclick = function(event){ var event = event || window.event; var target = event.target || event.srcElement; alert('Hello world, '+target.value) }</script>3. addEventListener() :
가장 권장하는 방식. 한 target에 여러 이벤트 등록 혹은 정의해 놓은 한 이벤트 핸들러를 여러 객체에 등록할 수 있다.
var t = document.getElementById('target');if(t.addEventListener){ t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); }); } else if(t.attachEvent){ // I.E 8이하 버젼의 호환을 위해.. t.attachEvent('onclick', function(event){ alert('Hello world, '+event.target.value); })}<input type="button" id="target" value="button" /><script> var t = document.getElementById('target'); t.addEventListener('click', function(event){ alert(1); }); t.addEventListener('click', function(event){ alert(2); });</script> <input type="button" id="target1" value="button1" /><input type="button" id="target2" value="button2" /><script> var t1 = document.getElementById('target1'); var t2 = document.getElementById('target2'); function btn_listener(event){ switch(event.target.id){ case 'target1': alert(1); break; case 'target2': alert(2); break; } } t1.addEventListener('click', btn_listener); t2.addEventListener('click', btn_listener);</script>출처
https://opentutorials.org/module/904/6759
https://opentutorials.org/module/904/6760
https://opentutorials.org/module/904/6761
'나는 프로그래머다! > HTML5' 카테고리의 다른 글
| C 와 Java 에선 못보던 JavaScript만의 특이한 문법 (0) | 2015.07.30 |
|---|---|
| JavaScript - 이벤트 응용4 - jQuery 활용 (0) | 2015.07.30 |
| JavaScript - 이벤트 응용2 - 이벤트 타입 (0) | 2015.07.29 |
| JavaScript - 이벤트 응용3 - 기본 이벤트 동작 취소 방법 (0) | 2015.07.29 |
| JavaScript - 이벤트 응용1 (버블링과 캡쳐링) (0) | 2015.07.28 |
| JavaScript에서의 객체와 객체지향 (0) | 2015.07.22 |
| JavaScript의 함수!! (0) | 2015.07.21 |
| JavaScript 재귀함수 예시 (0) | 2015.07.20 |
| jQuery 와 Element 객체와 Node 객체 (0) | 2015.07.16 |
| Attribute와 Property (0) | 2015.07.14 |