반응형
Event (이벤트)
문서가 모두 로딩되었을때 window의 load이벤트 발생!
window.onload와 body.onload는 동일하다.
window.onload=()=>{
const h2=document.createElement("h2");
h2.append(document.createTextNode("Hello Friday~"));
target.append(h2); //Uncaught ReferenceError: target is not defined -> 위에서부터 아래로 해석
};
<body onload="alert('Page Loading Complete')"><!--onload="alert('Page Loading Complete!')"-->
event
웹페이지 상에 일어나는 모든 사용자의 action, 네트워크상 처리상태변화 등 event라는 이름으로 하나의 이벤트로 관리됨.
event -> eventHandler : 이벤트가 발생하면, 태그에 등록된 핸들러를 호출
태그객체별로 event별 eventHandler 등록해서 사용
<h1>event</h1>
<a href="https://www.w3schools.com/tags/ref_eventattributes.asp">HTML Event Attributes</a>
handler binding
handler binding 1 : inline 이벤트 속성에 작성한 내용이 핸들러함수의 몸통에 전달된다.
handler binding 2 : 태그 객체의 이벤트 속성에 핸들러를 직접 지정, 하나의 핸들러만 적용 가능
handler binding 3 : addEventListener(이벤트명, 핸들러), 복수개의 핸들러 등록 가능
//handler binding 1
const test1=()=>{
console.log(btn1.onclick); //ƒ onclick(event) {test1();} 함수의 몸통에 전달됨.
};
//handler binding 2
btn2.onclick=()=>{
console.log(btn2.onclick);//()=>{console.log(btn2.onclick);}
};
btn2.onclick=()=>{
console.log('#btn2 clicked! - 2 ');
btn2.onclick=null; //등록된 함수 제거
};
//handler binding 3
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);실습문제 _ 이미지 로딩하기
조건 ) #btn를 클릭하면, 동적으로 img태그를 생성해서 #target의 자식요소로 추가.
추가가 완료되면(load) "이미지 로딩이 완료되었습니다. " 메세지를 alert하세요.
<div id="target"></div>
<script>
btn4.addEventListener('click',()=>{
const img=document.createElement("img");
img.src="../sample/image/hyunta.jpg";
img.style="width:100px; border-radius:50%;";
img.onload=()=>alert("이미지 로딩이 완료되었습니다.");
target.innerHTML ="";//자식요소 모두 제거
target.append(img);
});
</script>
반응형