day10
📌 event (1)
<body>
<input type="button" id="btn1" value="button1"/>
<input type="button" id="btn2" value="button2"/>
<script>
let t1 = document.getElementById('btn1');
let t2 = document.getElementById('btn2');
function btn_listener(event){
switch(event.target.id){
case 'btn1' :
alert("btn1");
break;
case 'btn2' :
alert("btn2");
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
</body>결과값
button1 클릭시
button2 클릭시
event (2)
<body>
<input type="button" id="btn1" value="property">
<input type="button" id="btn2" value="listener">
<script>
function onclick(){
alert('해린!');
}
function onclick2(){
alert('클릭!');
}
// property
document.getElementById("btn1").onclick = function() { onclick() };
document.getElementById("btn2").onclick = function() { onclick2() };
//listener
document.getElementById("btn1").addEventListener("click", onclick);
document.getElementById("btn2").addEventListener("click", onclick2);
// 이벤트 제거
document.getElementById("btn1").removeEventListener("click", onclick);
</script>
</body>결과값
property 누를시 출력 // removeEventListener로 인해 1번만 출력됨
listener 누를시 출력 2번됨
📢 event (3)
<body>
<!-- inline -->
<p>
<label>prevent event on</label>
<input id="prevent" type="checkbox"/>
</p>
<p>
<a href="https://www.naver.com"
onclick="if(document.getElementById('prevent').checked) return false;">naver</a>
</p>
<p>
<form action="https://www.naver.com"
onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit">
</form>
</p>
</body>결과값
클릭 x 일시 네이버 페이지로 이동
클릭 상태 일시 제출 눌러도 아무런 이벤트가 없음
📢 event (4) - property
<body>
<!--property-->
<p>
<label>prevent event on</label>
<input id="prevent" type="checkbox"/>
</p>
<p>
<a href="https://www.naver.com">naver</a>
</p>
<p>
<form action="https://www.naver.com">
<input type="submit">
</form>
</p>
<script>
document.querySelector('a').onclick = function(){
if(document.getElementById('prevent').checked){
return false;
}
}
document.querySelector('form').onclick = function(){
if(document.getElementById('prevent').checked){
return false;
}
}
</script>
</body>결과값은 event (3)과 같다
📢 event (5) - listener
<body>
<!-- listener -->
<p>
<label>prevent event on</label>
<input id="prevent" type="checkbox"/>
</p>
<p>
<a href="https://www.naver.com">naver</a>
</p>
<p>
<form action="https://www.naver.com">
<input type="submit">
</form>
</p>
<script>
document.querySelector('a').addEventListener('click',function(event){
if( document.getElementById('prevent').checked) {
event.preventDefault();
}
});
document.querySelector('form').addEventListener('submit',function(event){
if( document.getElementById('prevent').checked) {
event.preventDefault();
}
});
</script>
</body>결과값은 event (3)과 같다
📢 event (6)
<body>
<!--
change : 폼 컨트롤의 값이 변경되었을 때
발생하는 이벤트이다. 입력을 끝내고 focus를
빠져나왔을 때 발생한다.
-->
<p id="result"></p>
<input type="text" id="target"/>
<script>
let t = document.getElementById("target");
t.addEventListener('change', function(event){
document.getElementById("result").innerHTML
= event.target.value;
});
</script>
</body>결과값
폼에 쓰인 값이랑 똑같이 출력됨
📢 event (7)
<body>
<!--
blur, focus
- focus : 엘리먼트에 포커스가 생겼을 때
- blure : 포커스가 사라졌을때 발생하는 이벤트
-->
<input type="text" id="name"/>
<script>
let t = document.getElementById("name");
t.addEventListener("focus", function(){
console.log("focus");
});
t.addEventListener("blur",function(){
console.log("blur");
});
</script>
</body>결과값
📌event 예시
<style>
body{
background-color: black;
color: white;
}
#target{
width: 200px;
height: 200px;
background-color: green;
margin: 10px;
}
table{
border-collapse: collapse;
margin: 10px;
float: left;
width: 200px;
}
td, th{
padding: 10px;
border: 1px solid gray;
}
</style>
</head>
<body>
<!--
마우스
- 마우스와 관련해서 다양한 이벤트 타입을 지원한다.
- click : 클릭했을 때 발생하는 이벤트
- dblclick : 더블 클릭했을 때 발생하는 이벤트
- mousedown : 마우스를 누를 때 발생
- mouseup : 마우스 버튼을 땔 때 발생
- mousemove : 마우스를 움직을 때
- mouseover : 마우스가 엘리먼트에 진입할 때 발생
- mouseout : 마우스가 엘리먼트에 빠져나갈 때 발생
- contextmenu : 컨텍스트 메뉴가 실행될 때 발생
-->
<div id="target"></div>
<table>
<tr>
<th>event type</th>
<th>info</th>
</tr>
<tr>
<td>click</td>
<td id="elmclick"></td>
</tr>
<tr>
<td>dblclick</td>
<td id="elmdblclick"></td>
</tr>
<tr>
<td>mousedown</td>
<td id="elmmousedown"></td>
</tr>
<tr>
<td>mouseup</td>
<td id="elmmouseup"></td>
</tr>
<tr>
<td>mousemove</td>
<td id="elmmousemove"></td>
</tr>
<tr>
<td>mouseover</td>
<td id="elmmouseover"></td>
</tr>
<tr>
<td>mouseout</td>
<td id="elmmouseout"></td>
</tr>
<tr>
<td>contextmenu</td>
<td id="elmcontextmenu"></td>
</tr>
</table>양식 결과값
<script>
let t = document.getElementById("target");
function handler(event){
console.log(event.type);
console.log("----------------");
let info
= document.getElementById("elm" + event.type);
let time = new Date();
let timestr = time.getMilliseconds();
info.innerHTML = timestr;
}
t.addEventListener('click', handler); // 클릭했을때 handler 발동
t.addEventListener('dblclick', handler); // 더블클릭시 발동
t.addEventListener('mousedown', handler); // 클릭시 발동
t.addEventListener('mouseup', handler); // 클릭을 뗄시 발동
t.addEventListener('mousemove', handler); //
t.addEventListener('mouseover', handler);
t.addEventListener('mouseout', handler);
t.addEventListener('contextmenu', handler); // 우클릭 메뉴 출력시
</script>
</body>결과값
직접 초록색에 마우스 포인터 대고 각각 다 해보면 숫자값이 바뀐다
⭐️내가만든쿠키⭐️