이벤트 발생시 작동하는 함수를 할당하는 방법

summerrrrr·2023년 3월 8일
0

크게 두가지가 있다.

1. DOM 객체에 직접 지정하기 - 이벤트 핸들러 프로퍼티 방식

함수를 할당할 시에 함수의 실행 값이 아니라 함수 그자체를 할당해야한다. 왜?

 <button id="apply">apply</button>
function displayAlert() {
  alert('hello')
}
document.querySelector('#apply').onclick = displayAlert()

이 코드는 페이지가 로드될 때 displayAlert() 을 '즉시 실행'하고 undefinedonclick 핸들러에 할당한다. 그 결과 버튼을 클릭해도 아무런 일도 일어나지 않는다.

function displayAlert() {
  alert('hello')
}
document.querySelector('#apply').onclick = displayAlert;
document.querySelector('#apply').onclick = function displayAlert() {
  alert('hello')
}

따라서 함수 객체 자체를 할당하면 된다.

2. addEventLitener라는 매서드 할당하기

document.querySelector('#apply').addEventListener('click', function(){
   alert("hello")
})

🔺 다른 이벤트 명을 사용해서는 안된다 ex) Don't use 'submit' instead of 'click'

EventTarget.addEventListener('eventType',functionName[,useCapture])
  • 첫 번째 매개변수: 이벤트 타입(이벤트의 종류를 나타내는 문자열)
  • 두 번째 매개변수: 이벤트 핸들러
  • 마지막 매개변수 : 이벤트를 캐치할 이벤트 전파단계(캡처링 또는 버블링)
    • 생략 또는 false: 버블링 단계에서 이벤트 캐치
    • true: 캡처링 단계에서 이벤트 캐치
    • 이벤트 전파 단계(캡처링, 버블링) => 40.6절 '이벤트전파'

  • 이벤트 핸들러 프로퍼티 방식: 이벤트 핸들러 프로퍼티에 이벤트 핸들러(함수)를 바인딩
    { btn : onclick} 이라는 property에
    event handler function 바인딩
btn.onclick = function() {
console.log("aa")
}
  • addEventListener 메서드: 이벤트 핸들러(함수)를 인수로 전달
ntn.addEventListener("click", function() {console.log("aa"})

만약에 같은 요소에서 발생한 동일한 이벤트에 대해 각각의 방식을 사용한다면?
=> 서로 영향을 주지 않는다.

btn.addEventListener('click', function() {
  console.log('1'); //1
})
btn.addEventListener('click', function() {
  console.log('2'); //2
})

동일한 요소에서 발생한 동일한 이벤트에 대해

  • 핸들러 프로퍼티 방식 : 하나 이상의 이벤트 등록 불가
  • addEventListener 매서드 : 하나 이상의 핸들러 등록 가능. 이때 순서는 등록된 순서대로 호출. 단 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다.
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"

profile
안녕하세오

0개의 댓글