JavaScript addEventListener() 피해야 할 어리석은 실수
이벤트를 처리하기 위해 addEventListener()를 사용하는 것이 더 좋은 방법입니다. 원하는 요소에서 발생한 이벤트에 따라 실행할 함수를 별도로 정의할 수 있습니다.
이제 이벤트의 다른 요소에 해당 기능을 자유롭게 사용하여 재사용성을 보장할 수 있습니다. 그러나 일부 초보자는 직접 호출하여 addEventListener()에 전달하여 실수하는 경향이 있습니다. 다음은 다양한 방법과 시나리오를 설명하는 예입니다.
const btn = document.querySelector(".btn")
//This way, if these statements are required only for this
//Particular element event
btn.addEventListener("click", () => {
console.log("I'm clicked")
})
//Reusable function
const reusable = () => {
console.log("I'm reusable function for events")
}
//Here comes the mistake, You called it directly
btn.addEventListener("click", reusable())
//"I'm reusable function for events."
//Function executed without an event occurring
//Nothing will happen on click event
//Multiple Ways to fix it
//Don't call it directly
btn.addEventListener("click", reusable)
//Returning it inside another function
btn.addEventListener("click", ()=>reusable())
//Using bind function
btn.addEventListener("click", reusable.bind(null))
읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(JavaScript addEventListener() 피해야 할 어리석은 실수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/itsfz1/javascript-addeventlistener-silly-mistake-to-avoid-1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
