[40장] 이벤트 -1 #36
Assignees
Labels
Comments
Merged
|
Q. 다음 코드를 읽고 Dev Course 버튼을 '한번' 눌렀을때의 console출력 결과를 예상해 주세요. <!DOCTYPE html>
<html>
<body>
<button>Dev Course</button>
<script>
const $button = document.qurerySelector('button');
const handleClick = () => console.log('프롱이들 팀 프로젝트 화이팅!')
$button.addEventListener('click', handleClick);
$button.addEventListener('click', handleClick);
$button.addEventListener('click', handleClick);
</script>
</body>
</html>퀴즈 정답
addEventListener는 참조가 동일한 이벤트 핸들러를 중복 등록하면 |
|
Q. 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려고 합니다. 주석 위치에 들어갈 코드를 작성해 주세요. <!DOCTYPE html>
<html>
<body>
<button>Frong</button>
<script>
const $button = document.querySelector("button");
const handleClick = () => console.log("나는야 프롱이");
// 이벤트 핸들러 등록
$button.onclick = handleClick;
// 이벤트 핸들러 제거
// 여기 들어갈 코드를 작성해 주세요.
</script>
</body>
</html>퀴즈 정답$button.onclick = null;이벤트 핸들러 프로퍼티에 null을 할당하면 이벤트 핸들러를 제거할 수 있다. |
|
Q. 다음 예제에서 에러가 발생하는 부분을 찾고 그 이유를 서술하시오. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body onclick="showCoords(e)">
<p>클릭하세요. 클릭한 곳의 좌표가 표시됩니다.</p>
<em class="message">좌표</em>
<script>
const $msg = document.querySelector(".message");
function showCoords(e) {
$msg.textContent = `clientX: ${e.clientX}, clientY: ${e.clientY}`;
}
</script>
</body>
</html>퀴즈 정답
이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 객체를 전달받으려면 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event이어야 한다.
그 이유는 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성되는 이벤트 핸들러의 함수 몸체를 의미하기 때문이다. |
|
Q. 다음 코드의 <!DOCTYPE html>
<html>
<body>
<button>Click me!</button>
<script>
const $button = document.querySelector('button');
// 이벤트 핸들러 프로퍼티 방식
$button.onclick = function () {
console.log('[이벤트 핸들러 프로퍼티 방식]button click');
};
// addEventListener 메서드 방식
$button.addEventListener('click', function () {
console.log('[addEventListener 메서드 방식]button click');
});
</script>
</body>
</html>퀴즈 정답[이벤트 핸들러 프로퍼티 방식]button click |
|
OX퀴즈
$button.addEventListener('click', function foo() {
console.log('button click');
$button.removeEventListener('click', foo);
});퀴즈 정답
xxo
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: