안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
https://www.w3schools.com/tags/ref_eventattributes.asp
HTML Event Attributes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
event
- 웹 페이지 상에 일어나는 모든 사용자 action, 네트워크 상의 처리상태변화 등 하나의 이벤트로 관리
- event → eventHandler 이벤트가 발생하면, 태그에 등록된 핸들러를 호출
- 태그 객체 별로 event별 handler(listener)를 등록해서 사용
handler binding ①
- inline 이벤트 속성에 작성한 내용이 핸들러함수 몸통에 전달
HTML 코드
<button id="btn1" onclick="test1();">클릭미 #btn1</button>
Javascript 코드
const test1 = () => {
console.log(btn1.onclick);
};
핸들러 함수의 몸통부분에 작성한 test1()함수가 작성되어있는 것을 확인할 수 있습니다.
handler binding ②
- 태그 객체의 이벤트 속성에 핸들러를 직접 지정
- 속성으로 등록하는 것이기 때문에 하나의 핸들러만 등록 가능 (중복되면 나중에 등록한 핸들러가 작성)
HTML 코드
<button id="btn2">클릭미 #btn2</button>
Javascript 코드
btn2.onclick = () => {
console.log(btn2.onclick);
};
핸들러를 직접 입력하였기 때문에 작성한 함수가 그대로 출력되는 것을 확인할 수 있습니다.
하나 이상 등록 시
btn2.onclick = () => {
// console.log(btn2.onclick);
console.log('#btn2 clicked! - 1');
};
btn2.onclick = () => {
// console.log(btn2.onclick);
console.log('#btn2 clicked! - 2');
};
속성으로 등록하는 것이기 때문에 하나의 핸들러만 작성이 가능하므로 나중에 작성된 clicked - 2가 출력되는 것을 확인할 수 있습니다.
핸들러 삭제 방법
btn2.onclick = () => {
// console.log(btn2.onclick);
console.log('#btn2 clicked! - 2');
btn2.onclick = null; // 등록된 함수 제거
};
null로 지정하여 함수를 제거해줍니다.
따라서 버튼을 계속 눌러도 한 번만 실행되고 함수가 제거되었기 때문에 더이상 실행되지 않습니다.
handler binding ③
- addEventListener(이벤트명, 핸들러)
- 별도의 공간에 작성되므로 복수 개의 핸들러를 등록할 수 있음
HTML 코드
<button id="btn3">클릭미 #btn3</button>
Javascript 코드
addEventListener()
btn3.addEventListener('click', () => {
console.log('#btn3 clicked! - 1');
});
하나 이상 등록 시
btn3.addEventListener('click', () => {
console.log('#btn3 clicked! - 1');
});
btn3.addEventListener('click', () => {
console.log('#btn3 clicked! - 2');
});
별도 공간에 작성되기 때문에 복수개의 핸들러를 등록할 수 있으므로, clicked - 1, clicked - 2 모두 출력됩니다.
핸들러 삭제 방법
removeEventListener()
const foo1 = () => console.log('#btn3 clicked! - 1');
const foo2 = () => {
console.log('#btn3 clicked! - 2');
btn3.removeEventListener('click', foo2); // 삭제할 핸들러 명시!
};
btn3.addEventListener('click', foo1);
btn3.addEventListener('click', foo2);
addEventListener()로 핸들러를 등록하면 복수개 등록이 가능하기 때문에 어떤 핸들러를 제거할 지에 대한 명시가 필요합니다.
따라서 별도의 함수를 생성(foo1, foo2)을 해준 후 삭제할 핸들러를 명시해주었습니다.
마찬가지로 clicked - 2는 한 번 실행되고 삭제 되었기 때문에 더이상 실행되지 않습니다.
load 이벤트
HTML 코드
<div id="target"></div>
Javascript 코드
<head>
<script>
window.onload = () => {
const h2 = document.createElement('h2');
h2.append(document.createTextNode('Hello Friday'));
target.append(h2); // Uncaught ReferenceError: target is not defined
};
</script>
</head>
HTML 코드는 <body>태그 안에 Javascript 코드는 <head> 태그 안에 작성 되었기 때문에 window.onload 이벤트 속성이 없다면 target을 찾을 수 없다는 오류가 발생하게 됩니다. (코드는 위에서 아래로 실행되기 때문에)
따라서 문서가 로딩 되었을 때 window의 load 이벤트가 발생하므로 해당 코드를 핸들러로 작성하여 오류를 방지하였습니다.
window.addEventListener('load', () => console.log('문서 로드 완료! - 1'));
window.addEventListener('load', () => console.log('문서 로드 완료! - 2'));
window.onload와 body.onload는 동일
<body onload="alert('Page Loading Complete!');">
window.onload와 body.onload는 동일하므로 하나만 실행되어 'Hello Friday' 관련 코드는 실행되지 않았습니다.
@실습 - 이미지 로딩
- #btn4를 클릭하면 동적으로 img태그를 생성하여 #target의 자식 요소로 추가
- 추가가 완료되면(load) '이미지 로딩이 완료되었습니다.' 메세지를 alert
HTML 코드
<button id="btn4">@실습 - 이미지로딩</button>
<div id="target"></div>
Javascript 코드
btn4.onclick = () => {
const img = document.createElement('img');
img.src = '../../sample/image/hyunta.jpg';
img.style = 'width:200px; border-radius:50%;';
img.onload = () => alert('이미지 로딩이 완료되었습니다.');
target.innerHTML = "";
target.append(img);
};
