Tag
정의
HTML문서에서 콘텐츠의 시작와 끝을 나타내는 마크업
-->마크업: 텍스트 문서나 데이터의 구조나 메타데이터를 정의하기 위해 사용되는 특별한 코드나 규칙
역할
문서의 구조 정의, 콘텐츠 구획화, 스타일링과 스크립트 적용
Tag종류
1. <svg>태그
<svg>삽입 |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 |  |
2. <img>태그
<img src=x> |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 | |
3. <input>태그
<input autofocus onblur=alert(1)> |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 |  |
4. <audio>태그
<audio src= x onloadstart = "alert(1)"> |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 |  |
5. <video>태그
<video src= x onloadstart = "alert(1)"> |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 |  |
6. <body>태그
<body> |
|---|
 |
| 스크립트 삽입 확인 | 결과확인 alert(1) |
|---|---|
 | |
EventHandler
Event 정의
웹브라우저에서 DOM과 클라이언트가 서로 상호작용하는 것
-> 사용자의 행동이나 브라우저의 상태변화를 나타내는 신호
-> ex) 버튼클릭, 마우스 이동, 페이지 로드 등
EventHandler 정의
특정이벤트가 발생했을때 실행되는 함수
이벤트가 발생했을때 특정작업을 실행하여 사용자와 상호작용을 처리함
EventHandler 종류
| EventHandler | 기능 |
|---|---|
onclick | 마우스 클릭(마우스 눌렀다 땔때) |
ondbclick | 마우스 더블 클릭 |
onmousedwon | 마우스 클릭(마우스 누를때) |
onmouseup | 마우스 클릭(마우스 누르고 난후 땔때) |
onmouseout | HTML요소에 마우스 포인터가 벗어날때(자식요소로 갈때도 발생) |
onmouseleave | HTML요소에 마우스 포인터가 완전히 벗어날때 |
onmousemove | 마우스 포인터가 HTML요소 위에서 움직일때 |
onmouseover | 마우스 포인터가 HTML요소 위에 올라왔을 때 |
onkeydown | 키보드 버튼을 누르는 순간 |
onkeypress | 키보드 버튼을 누르고 땔때(주로 문자키에 특수키x) |
onkeyup | 키보드 버튼을 누르고 땔때(모든 키에) |
onchange | input태그 요소값이 바뀔때(변경된후 포커스가 잃을때) |
oninput | input태그 요소값이 바뀔때(변경된 직 후) |
onblur | input태그 요소에서 포커스를 잃을때 |
onfocus | input태그 요소에서 포커스를 얻었을때 (커서 들어올때) |
autofocus | 페이지가 로드될 때 특정 입력 필드가 자동으로 포커스를 얻도록 하는 HTML 속성(같이 쓸 수 있음 <autofocus>) |
onsubmit | form태그안에 제출버튼 누를때 |
onload | 페이지나 특정요소가 완전히 로드되었을때 |
onunload | 페이지나 특정 요소가 언로드(사용자에 의해 닫히거나 이동되기 직전)될 때 발생하는 이벤트 |
onerror | 페이지나 이미지 읽어올때 오류 발생하면 |
onablort | 페이지나 이미지 읽어오기가 중단되면 |
EventHandler적용법
DOM요소로 프로퍼티 적용하는 법
일반 태그 적용
//body태그에 있음(input태그만)
<input type="button" id ="good" value="submit">
<script>
function con(){
alert(1);
}
window.onload=function(){
//버튼 요소를 가져옴
let a = document.getElementById("good");
a.onclick(Eventhandler자리) = con()
}
</script>iframe적용
<iframe src = "URL" id = "target"></iframe>
<script>
function con(){
alert(1);
}
//iframe요소를 가져옴
document.getElementById("target").onload=function(){
let a = document.getElementById("target");
let b = a.contentDocument;
b.onclick(Eventhandler자리) = con()
}
</script>AddEventListener로 적용
AddEventListenr란?
AddEventListener는 target.addEventListener(event, function, useCapture); 로 구성되어있음
- target: 이벤트 리스너를 추가할 요소를 지정
- event: 리스너가 반응할 이벤트의 종류를 지정 (예: "click", "mouseover" 등).
- function: 이벤트가 발생했을 때 실행할 함수를 지정
- useCapture (선택적): 이벤트 캡처링을 사용할지 여부를 나타내는 부울 값 (기본값은 false).
보통 적용
<button id="myButton" class="button">Click Me!</button>
<script>
// 버튼 요소를 가져옴
const button = document.getElementById('myButton');
// 버튼에 클릭 이벤트 리스너 추가
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>iframe적용
<iframe src = "URL" id = "target"></iframe>
<script>
// iframe 요소를 가져옴
let target = document.getElementById('target');
target.onload = function() {
let target = document.getElementById('target');
let DOM = target.contentDocument;
DOM.addEventListener('click', function() {
alert('Button clicked!');
});
}
</script>