<script>
/*
이벤트(evernt)란?
특정의 DOM에 사용자가 마우스 또는 키보드 등의 행위가 일어 났을 때 문서객체에
발생되는 일련의 동작(사건, event)을 말한다. 특정의 이벤트가 발생하면 그 이벤트에
맞는 동작을 하는 기능을 수행할 수 있도록 하게 되는데 일반적으로 동작을 수행하는
것을 함수와 연결한다. 그 함수는 이벤트가 발생되기 전에는 실행되지 않다가 해당
이벤트가 발생되면 수행된다. 이 함수를 이벤트핸들러(Event Handler)라고 한다.
자바스크립트에서 처리하는 이벤트는
1. UI관련 이벤트
load : 웹페이지나 스크립트의 로드가 완료가 되었을 때
unload : 웹페이지가 언로드 될 때 주로, 새로운 페이가 페이지가 요청될 때
error : 브라우저가 자바스크립트의 오류가 발생했거나 요청한 자원이 없을 때...
resize : 브라우저 창의 크기를 조절 했을 때
scroll : 스크롤바를 움직였을 때
select : 특정의 텍스트를 선택했을 때
2. 키보드관련 이벤트
keydown : 키보드의 키를 누르고 있을 때
keyup : 누르고 있던 키를 뗄 때
keypress : 키를 누르고 뗐을 때
A(65) a
3. 마우스관련 이벤트
click
dbclick
mousedown
mouseup
mousemove
mouseover : 마우스가 dom의 위로 움직였을 때(터치스크린에선 동작하지 않는다)
mouseout : 마우스가 dom 밖으로 움직였을 때(터치스크린에선 동작불가)
mouseenter : 마우스를 dom커서에 올려다 놓았을 때
mouseleave : 마우스가 dom에서 커서가 빠졌을 때
4. 포커스관련 이벤트
focus/focusin : dom객체에 포커스가 있을 때
blur/focusout : dom객체에 포커스를 잃어 버렸을 때
5. 폼관련 이벤트
input : input or textarea 요소의 값이 변경되었을 때
change : select box, checkbox, radio 객체의 상태가 변경되었을 때
submit : form을 submit(button or enter)
reset : reset버튼을 클릭했을 때
6. 클립보드관련 이벤트
cut : 내용을 잘라내기할 때
copy : 내용을 복사할 때
paste : 내용을 붙여넣기할 때
B. 이벤트를 등록하는
1. inline 방식 : tag의 속성으로 지정하는 것(onclick, Keypress...)
2. propert 방식 :
발생한 이벤트를 해당 객체의 프로퍼티로 전달하는즉, 등록하는 방법이다.
인라인 방식은 객체와 강하게 연결되어 있는 상태에 비해
HTML과 JavaScript를 분리하는 방식이다. 대신에 이벤트핸들러 방식은 오직 하나의 이벤트만
바인딩(연결)할 수 있다.
3. addEventListener 방식
addEventlistener매서드를 이용하면 대상 DOM객체에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때
실행할 콜백함수(이벤트핸들러)를 지정한다.
dom객체.addEventListener('이벤트타입', 콜백함수, [, useCapture])
useCapture옵션은 bubbling 수행여부를 설정(기본값은 false)
addEventListener방식은 이전방식에 비해 장점이 있다.
a. 하나의 이벤트에 복수개의 이벤트핸들러를 추가할 수 있다.
b. 캡쳐링과 버블링을 지원한다.
c. HTML요소 뿐만 아니라 모든 DOM요소(HTML, XML, SVG)에 대해 동작한다.
*/
window.onload = function(){
}
function myFunction(name){
alert(`${this.value}님 안녕하세요 반갑습니다`);
}
function myFunction1(name){
alert(`${name}님 안녕하세요 반갑습니다`);
}
let h3 = document
</script>
</head>
<body>
<h3 id="header1" onclick="alert('header1을 클릭했습니다')">여기를 클릭하세요</h3>
<input type="button" onclick="alert('Hello?' + this.value)" value="홍길동">
<input type="button" onclick="alert('Hello?' + this.value)" value="김민재">
<input type="button" onclick="myFunction(); myFunction1(this.value)" value="이강인">
<input type="button" id="btn" class="btn" value="류현진">
<input type="button" id="btn" class="brn" value="김하성">
<hr>
<input type="button" id="target" value="홍길동2">
<script>
let btn1 = document.querySelector('#btn');
btn1.onclick = function(){
alert('첫번째 인사 : 안녕하세요 반갑습니다');
}
let btn2 = document.querySelector('.btn');
btn2.onclick = function(){
alert('두번째 인사 : 안녕하세요 반갑습니다');
}
let t = document.querySelector('#target');
t.addEventListener('click', function(e){
alert(`${e.target.value}님 안녕하세요 반갑습니다`);
})
</script>
<script>
window.onload = function(){
function whenClick(){
alert('문서객체가 클릭이 되었습니다')
}
// 1. 이벤트추가
let header1 = document.querySelector('#header1');
header1.onclick = whenClick;
let header2 = document.querySelector('#header2');
header2.onclick = whenClick;
// 2. 이벤트삭제
header2.onclick = null;
// 3. 실습1.
// header3태그를 클릭하면 해당 객체가 삭제가 되는 onclick이벤트를 작성해 보세요
let header3 = document.querySelector('#header3');
header3.addEventListener("click", (e) => {
e.target.remove();
});
}
</script>
</head>
<body>
<h3 id="header1">여길 클릭하세요</h3>
<h3 id="header2">여길 클릭하세요</h3>
<h3 id="header3" style="color:red;">여길 클릭하세요</h3>
</body>
<body>
<h1>텍스트노드 삽입하기</h1>
<p>React</p>
<p>Node.js</p>
<p>JacaScript</p>
<button >텍스트추가</button>
<script src="./js/inserttextnode.js"></script>
</body>
<body>
<h1>노드삭제하기</h1>
<ul id="items">
<li>첫번째 노드</li>
<li>두번째 노드</li>
<li>세번째 노드</li>
</ul>
<script src="./js/js05.js"></script>
</body>
<style>
ul{
list-style : none;
}
.delBth:hover{
cursor: pointer;
}
.delBtn {
padding: 5px; 10px;
position: absolute;
right: 10px;
}
</style>
</head>
<body>
<div id="container">
<h1>도서목록</h1>
<form action="">
<table id="bookinfo">
<tr>
<td>제목</td>
<td><input type="text" id="title"></td>
</tr>
<tr>
<td>작가</td>
<td><input type="text" id="author"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="reset">취소하기</button>
<button id="save">추가하기</button>
</td>
</tr>
</table>
</form>
</div>
<hr>
<ul id="booklist">
</ul>
<script src="./js/js06.js"></script>
</body>
'일 > javascript' 카테고리의 다른 글
| js10_exception (0) | 2023.06.01 |
|---|---|
| js09_builtin (0) | 2023.06.01 |
| js07_DOM (0) | 2023.06.01 |
| js06_BOM (0) | 2023.05.31 |
| js05_object (0) | 2023.05.31 |