📝 JavaScript
🖥️ 1. event
- 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.
1-1. inline
- 태그에 연관된 스크립트가 분명하게 드러나지만 정보로서의 가치가 떨어진다.
EX) 인라인 방식
<body>
<input type="button" value="Hello World"
onclick="alert('Hello World')" />
</body>
1-2. 프로퍼티 리스너
- 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
- 인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이다.
EX)
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.onclick = function(event){
alert("hello world " + event.target.value);
}
</script>
</body>
1-3. 이벤트 객체
- 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
1-4. addEventListener
EX1)
<body>
<input type="button" id="btn" value="button"/>
<script>
let t = document.getElementById('target');
t.addEventListener('click', function(event){
alert("hello world , " + event.target.id);
});
</script>
</body>
EX2)
<body>
<input type="button" id="btn1" value="btn1"/>
<input type="button" id="btn2" value="btn2"/>
<script>
let t1 = document.getElementById('btn1');
let t2 = document.getElementById('btn2');
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
function btn_listener(event){
if( event.target.id == 'btn1' ){
alert(1);
} else if ( event.target.id == 'btn2' ){
alert(2);
}
}
</script>
</body>
1-5. 자기 자신을 참조하는 방법 (this)
EX)
<body>
<input type="button" id="target" value="button"
onclick="alert('hello,' +
document.getElementById('target').value);" />
<input type="button" value="button2"
onclick="alert('hello,' + this.value);" />
</body>
