오늘 배운 것
EventTarget.addEventListener()
<HTML>
<input id="button" type="button" value="button">
//id와 value값이 button인 버튼<JS>
1)
let elButton = document.getElementById("button"); //변수 elButton에 id가 button인 엘리먼트 객체를 반환
elButton.addEventListener("click", POP); //버튼을 클릭했을시 POP 함수 실행
function POP (event){
console.log(event.target)
});
2)
let elButton = document.getElementById("button");
elButton.addEventListener("click", function(event){
console.log(event.target)
});
3)
let elButton = document.getElementById("button"); //변수 elButton에 id가 button인 엘리먼트 객체를 반환
elButton.onclick = POP; //onclick속성으로 'POP함수 실행' 부여
function POP (event){
console.log(event.target)
}); - 항상 3번 방식으로 코딩을 하다가 오늘 Office Hour 시간에
.addEventListener()메소드가 나와서 한 번 써봤다. - 일단 3번 방식이 오래된 방식이라는 건 알겠는데 나에게는 조금 더 직관적인 것 같다.
- 다만
.addEventListener()의 경우 함수를 여러가지를 설정해줄 수 있고,.onclick의 경우 하나의 변수에 한 가지의 함수만 설정할 수 있다고 한다. 결국 한 번의 클릭에 여러가지의 함수를 동시에 구현하고 싶을 때는.addEventListener()를 사용하면 되겠다. - 그나저나 함수 매개변수에
event를 넣어주지 않아도 작동이 잘 되는데 이건 오류인지..? 어느 상황에서건 작동이 잘 된다면 굳이 놔둘 이유가 있는지?
오늘 하루
- 내일부터 다시 운동 !
다 늦은 밤, 달밤의 개발일기