-
이벤트 기초Javascript 2024. 3. 14. 11:27
onclick
1. HTML만 사용하는 방법
<input type="button" onclick="alert('클릭!')" value="클릭해 주세요.">2. HTML과 자바스크립트를 함께 사용하는 방법
<input type="button" id="button" value="클릭해 주세요."> <script> button.onclick = function() { alert('클릭!'); }; </script>함수를 할당할 때
// 올바른 방법 button.onclick = sayThanks; // 틀린 방법 button.onclick = sayThanks();-> () 괄호 없이 할당해야한다. / ()의미는 함수를 호출하겠다는 의미이다.
✅ 그런데, HTML 속성값에는 괄호를 넣어서 사용해야한다.
<input type="button" id="button" onclick="sayThanks()">
addEventListener
-> 핸들러를 여러개 할당하기 위해서 사용.
element.addEventListener(event, handler, [options]);<input id="elem" type="button" value="클릭해 주세요."/> <script> function handler1() { alert('감사합니다!'); }; function handler2() { alert('다시 한번 감사합니다!'); } elem.onclick = () => alert("안녕하세요."); elem.addEventListener("click", handler1); // 감사합니다! elem.addEventListener("click", handler2); // 다시 한번 감사합니다! </script>✅ addEventListener에 handler 부분에는 함수 뿐만 아니라 객체도 들어갈 수 있다!
<button id="elem">클릭해 주세요.</button> <script> let obj = { handleEvent(event) { alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다."); } }; elem.addEventListener('click', obj); </script>✅ 문서가 다 읽히고 DOM 트리 생성 완료되었을 때 이벤트를 사용하려면 무조건 addEventListener를 사용해야한다.
document.addEventListener("DOMContentLoaded", function() { alert("DOM이 완성되었습니다."); });
버블링과 캡처링
event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있습니다.
- event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않습니다.
- nthis는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.
addEventListener의 'passive' 옵션
addEventListener의 passive: true 옵션은 브라우저에게 preventDefault()를 호출하지 않겠다고 알리는 역할을 합니다.
-> 그런데 모바일에서 preventDefault 기능을 사용하게되면 스크롤링을 막게 되고, 화면이 떨리는 현상이 발생할 수 있습니다. 그래서 passive: true라는 옵션을 이용해서 스크롤링을 지속하겠다고 브라우저에게 알려줘야합니다.
<body> <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p> <ul id="thumbs"> <!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute --> <li> <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a> </li> <li> <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a> </li> <li> <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a> </li> <li> <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a> </li> <li> <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a> </li> </ul> <script> let thumbs = document.getElementById('thumbs'); thumbs.onclick = clickThumbs; function clickThumbs(event){ let thumbnail = event.target.closest('a'); if(!thumbnail) return; showThumbnail(thumbnail.href, thumbnail.title) event.preventDefault(); } function showThumbnail(href, title){ let largeImg = document.getElementById('largeImg'); largeImg.src = href; largeImg.alt = title; } </script> </body> </html>❓궁금했던 점 -> 왜 onclick 타깃을 a로 바로 두지 않고 왜 ul에 주는걸까 재밌는 생각이 들었다.
✅ 그 답으로는 thumbs 요소에 직접 onclick 이벤트를 추가하는 것은 이벤트 위임(event delegation)이라는 프로그래밍 기법을 사용하는 것입니다. 이 기법은 다음과 같은 장점을 제공합니다:
1. 메모리 및 성능 향상: 각 썸네일 이미지(<a> 요소)에 이벤트 리스너를 개별적으로 추가하는 대신, 부모 요소인 thumbs에 하나의 이벤트 리스너를 추가합니다. 이렇게 하면 메모리 사용량이 줄어들고 성능이 향상됩니다.
2. 동적 요소에 대한 처리: 새로운 썸네일 이미지가 동적으로 추가되거나 제거될 수 있습니다. 부모 요소에 이벤트 리스너를 추가하면 새로운 요소가 추가되더라도 자동으로 해당 이벤트에 대응할 수 있습니다.
3. 코드 간결성: 하나의 이벤트 리스너만 사용하므로 코드가 더 간결해지고 관리하기 쉬워집니다.
커스텀 이벤트
-> 커스텀 이벤트는 반드시 addEventListener를 사용해 핸들링해야 합니다.
ex) dispatchEvent
- 사용자가 동작을 트리거하지 않고도 코드에서 이벤트를 발생시킬 때 유용하다.
- dispatchEvent 를 호출하면 해당 요소에 연결된 이벤트 리스너가 호출되서 이벤트를 처리한다.
- 특정 조건이나 사용자 동작에 의존하지 않고도 원하는 이벤트를 발생시킬 수 있다.
- 버튼을 클릭하지 않고도 코드에서 '클릭' 이벤트를 발생시킬 수 있다.
'Javascript' 카테고리의 다른 글
javascript form 폼 조작 (1) 2024.03.27 Pointer event 포인터 이벤트 (0) 2024.03.21 자바스크립트 문서 (0) 2024.03.13 DOM 기초 (0) 2024.03.07 [코어 자바스크립트] 기타 (0) 2024.02.29