크게 두가지가 있다.
함수를 할당할 시에 함수의 실행 값이 아니라 함수 그자체를 할당해야한다. 왜?
<button id="apply">apply</button>
function displayAlert() {
alert('hello')
}
document.querySelector('#apply').onclick = displayAlert()
이 코드는 페이지가 로드될 때 displayAlert()
을 '즉시 실행'하고 undefined
을 onclick
핸들러에 할당한다. 그 결과 버튼을 클릭해도 아무런 일도 일어나지 않는다.
function displayAlert() {
alert('hello')
}
document.querySelector('#apply').onclick = displayAlert;
document.querySelector('#apply').onclick = function displayAlert() {
alert('hello')
}
따라서 함수 객체 자체를 할당하면 된다.
document.querySelector('#apply').addEventListener('click', function(){
alert("hello")
})
🔺 다른 이벤트 명을 사용해서는 안된다 ex) Don't use 'submit' instead of 'click'
EventTarget.addEventListener('eventType',functionName[,useCapture])
btn.onclick = function() {
console.log("aa")
}
ntn.addEventListener("click", function() {console.log("aa"})
만약에 같은 요소에서 발생한 동일한 이벤트에 대해 각각의 방식을 사용한다면?
=> 서로 영향을 주지 않는다.
btn.addEventListener('click', function() {
console.log('1'); //1
})
btn.addEventListener('click', function() {
console.log('2'); //2
})
동일한 요소에서 발생한 동일한 이벤트에 대해
const handleClick = () => console.log("aa");
btn.addEventListener('click', handleClick); // aa
btn.addEventListener('click', handleClick); // 출력안됌
단어가 너무 헷갈려서 정리해보았다.
HTML = 요소 + 어트리뷰트
요소 = 콘텐츠 + 태그
태그는 요소를 정의
콘텐츠는 요소의 내용 나타냄
<p>
요소는 문단을 나타냄
어트리뷰트는 요소의 특성을 정의
요소의 시작태그에 추가된다.
이름+값
요소의 동작 방식을 변경하거나
요소에 대한 정보를 제공하는데 사용
<img>
요소의 src
어트리뷰트는 이미지 파일의 url지정
<a href="https://www.example.com">Click here to visit Example</a>
요소 : <a>Click here to visit Example</a>
어트리뷰트 : href="https://www.example.com"