Javascript
Javascript(이벤트 리스너 호출)_2024-07-22
앵보몬
2024. 7. 22. 17:13
728x90
반응형
이벤트 리스너 호출
이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출합니다.
이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조합니다.
이벤트 객체(event object)
이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체입니다.
이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있습니다.
모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가집니다.
이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달됩니다.
예제
var btn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 리스너를 등록함.
function clickBtn(event) {
document.getElementById("text").innerHTML =
"이 이벤트의 타입은 " + event.type + "이며, 이벤트의 대상은 " + event.target + "입니다.";
}
이벤트 호출 순서
addEventListener() 메소드를 사용하면 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있습니다.
이때 특정 타입의 이벤트가 발생하면 브라우저는 다음과 같은 순서로 이벤트를 호출하게 됩니다.
1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록한 이벤트 리스너를 가장 먼저 호출합니다.
2. 그 후 addEventListener() 메소드를 사용하여 등록한 이벤트 리스너를 등록한 순서대로 호출합니다.
https://www.tcpschool.com/javascript/js_event_eventListenerCall
test53.html
0.00MB
test54.html
0.00MB
test55.html
0.00MB
test56.html
0.00MB
test53.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container{
margin-left: 40%;
margin-top: 5%;
border: 2px solid black;
width: 600px;
padding: 10px;
box-shadow: 3px 3px 3px gray;
font-weight: bolder;
}
h2{
text-shadow: 2px 2px 2px gray;
color: black;
font-weight: bolder;
text-align: center;
}
#num1, #num2{
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<h2>javascript addeventlistener()</h2>
<p>
이 예제는 addeventlistener() 메서드를 사용할 때 매개변수 값을 전달하는
방법을 보여줍니다.
</p>
<p>클릭버튼을 누르면 계산이 됩니다.</p>
<input type="number" id="num1" value="35" />
<input type="number" id="num2" value="23" />
<button id="mybtn">계산하기</button>
<button type="button" onclick="myclick()">click me</button>
<button type="button" onclick="myfun1()">다중선택기</button>
<br /><br />
//css 스타일 변경 -> document.getElementById.style.color = "blue";
<p id="p1">hello world1</p>
<p id="p2">hello world2</p>
<p id="p3">hello world3</p>
<p id="result"></p>
</div>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontsize = "30px";
document.getElementById("p1").addEventListener("click", function () {
document.getElementById("p1").style.color="yellow";
});
function myfun1(){
let mylist = document.querySelectorAll("p");
mylist[3].style.backgroundColor = "green"
}
function myclick(){
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.color="skyblue";
}
var mybtn = document.getElementById("mybtn");
mybtn.addEventListener("click", function () {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let sum = Number(num1) + Number(num2);
document.getElementById("result").innerHTML =
"합계는" + sum + "입니다.";
});
</script>
</body>
</html>
test54.html
<!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>
<h2>javascript & dom - dropdown menu</h2>
<select id="hobbyselect">
<option value="운동">운동</option>
<option value="탁구">탁구</option>
<option value="영화">영화</option>
<option value="낚시">낚시</option>
<option value="바둑">바둑</option>
</select>
<ul>
<li id="p1">김밥</li>
<li id="p2">라면</li>
<li id="p3">떡볶이</li>
</ul>
<button onclick="hobby1()">선택 확인</button>
<button onclick="hobby2()">음식선택 확인</button>
<script>
function hobby2() {
let li_list = document.querySelectorAll("li");
alert(li_list[2].textContent);
}
function hobby1() {
let mylist = document.getElementById("hobbyselect").value;
alert(`선택하신 취미는 "${mylist}"입니다.`);
}
document.getElementById("p1").addEventListener("click", function(){
document.getElementById("p1").style.color = "red";
});
document.getElementById("p2").addEventListener("click", function(){
document.getElementById("p2").style.color = "blue";
});
document.getElementById("p3").addEventListener("click", function(){
document.getElementById("p3").style.color = "green";
});
</script>
</body>
</html>
test55.html
<!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>
<h1>web programming</h1>
<ul id="itemlist">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<button onclick="addlist()">항목 추가</button>
<button onclick="adddel()">항목 삭제</button>
<script>
function addlist() {
let txt = prompt("추가할 항목을 입력하세요 : ");
let listitem = document.createElement("li"); //새로운 항목을 만들기
listitem.textContent = txt; //목록 항목의 내용을 깁밥으로 설정
document.getElementById("itemlist").appendChild(listitem); //itemlist에 새로 만든 항목 추가하기
}
function adddel() {
let itemlist = document.getElementById("itemlist"); //아이디가 itemlist인 목록 가져오기
if (itemlist.children.length > 0) {
//목록에 항목이 있는지 확인하기
itemlist.removeChild(itemlist.lastChild); //항목이 있는 경우, 마지막 항목 삭제하기
} else {
alert("삭제할 항목이 없습니다."); //항목이 없는 경우, 알림 메시지 표시하기
}
}
</script>
</body>
</html>
test56.html
<!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>
<h1>web programming</h1>
<div id="paragraphcontainer"></div>
<button onclick="list_add()">추가</button>
<button onclick="list_delete()">삭제</button>
</body>
<script>
function list_add(){
let par = document.getElementById("paragraphcontainer");
let txt = prompt("추가할 항목을 입력하세요 : ");
let listitem = document.createElement('p');
listitem.textContent = txt;
document.getElementById("paragraphcontainer").appendChild(listitem);
}
function list_delete(){
let itemlist = document.getElementById("paragraphcontainer");
if (itemlist.children.length > 0) {
itemlist.removeChild(itemlist.lastChild);
} else {
alert("삭제할 항목이 없습니다.");
}
}
</script>
</html>
728x90
반응형