이전 목록 다음

자바스크립 질문

뀨뀨이
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 1,644

<!DOCTYPE html>
<html>
<head>
<p style="color : blue">이것은
<span style="color:red" id="span">문장입니다.
</span>
</p>
<form id="form">
<input type="text" name="s">
<input type="button" value="테스트" id="button>"
<hr>
</form>
<script>
var form = document.getElementByld("form");
var button = document. getElementByld("button");

document.body.addEventListener("Click", bodyF1, true);
document.body.addEventListener("Click", bodyF2, false);
form.onclick = formF;
button.addEventListner("Click", buttonF1, false);
button.addEventListner("Click", buttonF2, true);

function bodyF1() {
}
function bodyF2() {
}
function formF1() {
}
function buttonF1() {
}
function buttonF2() {
}
</script>
</body>
</html>

 

버튼을 클릭했을 때, 이벤트리스너 5개 함수(bodyF1, bodyF2, formF, buttonF1, buttonF2)들이 호출되는 순서가 어떻게 되나요??

자바스크립트
|

답변 2개

핑크빈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

해당소스에 오타가많네요. 저소스 기준으로 고쳤을떄

 

1. bodyF1() 

2. buttonF2()

3. buttonF1()

4. formF1()

5.bodyF2()

그누위즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전

전체 코드 자체가 지금 잘못되었습니다.

출력 순서를 보고싶다면

Copy 
function bodyF1() {
console.log('bodyF1');
}
function bodyF2() {
console.log('bodyF2');
}
function formF1() {
console.log('formF1');
}
function buttonF1() {
console.log('buttonF1');
}
function buttonF2() {
console.log('buttonF2');
}

위와 같이 콘솔 로그를 찍어보시면 됩니다.

크롬 F12 개발자도구에서 콘솔 탭에서 순서대로 출력되실겁니다.

물론 현재 올려주신 샘플 코드는 구동되지않는 코드라 로그가 찍히지 않습니다.

답변을 작성하려면 로그인이 필요합니다.