자바스크립 질문
본문
<!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
전체 코드 자체가 지금 잘못되었습니다.
출력 순서를 보고싶다면
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 개발자도구에서 콘솔 탭에서 순서대로 출력되실겁니다.
물론 현재 올려주신 샘플 코드는 구동되지않는 코드라 로그가 찍히지 않습니다.
해당소스에 오타가많네요. 저소스 기준으로 고쳤을떄
1. bodyF1()
2. buttonF2()
3. buttonF1()
4. formF1()
5.bodyF2()
