728x90
그동안의 이벤트 접근법
<body>
<input type="button" value="눌렁" onclick="f_click()">
<script>
function f_click() {
}
</script>
</body>
새로운 등록법
v_btn1에 클릭 이벤트를 등록
<input type="button" id="id_btn1" value="등록법2">
<script>
var v_btn1 = document.getElementById("id_btn1");
v_btn1.onclick=function(){
}
</script>
<input type="button" id="id_btn1" value="등록법2">
<script>
var v_btn1 = document.getElementById("id_btn1");//버튼을 가리킴
v_btn1.onclick=function(){
alert("나 너 눌렀니?");
}
</script>>> 실행순서
위에는 안 뜨고 아래만 뜬다(나중 이벤트로 덮어 씌워짐)
<script>
window.onload = function(){
alert("페이지 로딩이 끝났어??");
}
window.onload = function(){
alert("뭐!??!!?!??? 페이지 로딩이 끝났다고???");
}
</script>같은 이벤트에 함수(이벤트핸들러)를 정의하면 덮어써버림. (곧 나중것만 실행됨)
권장되는 이벤트 등록법
<input type="button" id="id_btn2" value="등록법3">
<script>
var v_btn2 = document.getElementById("id_btn2");
v_btn2.addEventListener("click", function () {
alert("이것이 권장되는 이벤트 등록법!")
});
</script> |
 |
<script>
window.addEventListener("load", function () {
alert("페이지 로딩이 끝났어??");
});
window.addEventListener("load", function () {
alert("뭐!??!!?!??? 페이지 로딩이 끝났다고???");
});
</script>덮어쓰지 않고 추가가 됨
추가버튼 클릭시마다 사진 추가
<!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 {
width:300px;
height:300px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="container"></div>
<input id="id_btn" type=button value="추가">
<script>
var v_btn = document.getElementById("id_btn");
var v_container = document.getElementById("container");
v_btn.onclick = function(){
var v_img = "<img src=images/all1.jpg width=100 height=100 >";
v_container.innerHTML += v_img;
}
</script>
</body>
</html>img의 src, width, height들은 속성
메모리상에 img태그 자체를 생성
<script>
v_btn.onclick = function () {
var v_img = documen.createElement("img");
}
</script>메모리에 넣었기에 눈에 보이지 않는다!!
v_btn.onclick = function () {
var v_img = documen.createElement("img");//메모리상에 img태그 자체를 생성
v_img.setAttribute("src", "images/all2.jpg");
v_img.setAttribute("width", 100);
v_img.setAttribute("height", 100);
}눈에 보이는 어딘가에 넣어줘야한다.(문서(html)에 넣어줄지를 알려줘야해)
var v_btn = document.getElementById("id_btn");
var v_container = document.getElementById("container");
v_btn.onclick = function () {
var v_img = document.createElement("img"); // 메모리상에 img객체를 만듬
v_img.setAttribute("src", "images/all0.jpg");
v_img.setAttribute("width", 100);
v_img.setAttribute("height", 100);
// 여기까지하면 눈에 안 보임, 문서(html) 어디에 넣어줄지를 알려줘야함
v_container.appendChild(v_img);
}기능은 append가 많은데 브라우저 호환성에 문제가 있음
따라서 모든 브라우저에 호환되는 appendChild를 많이 사용한다.
테이블같은경우는 innerHTML을, 그외에는 이와같이 사용하면 가독성이 좋음
v_img.setAttribute("width",100); // 속성값 write
alert(v_img.getAttribute("width")); // 속성값 read
appendChild
버튼 클릭 시 왼쪽의 사진 오른쪽으로 이동시키기
<style>
.nemo {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nemo" id="id_dv1">
<img src="images/all0.jpg" width=100 height=100>
</div>
<div class="nemo" id="id_dv2">
<img src="images/all1.jpg" width=100 height=100>
</div><br>
<input type=button id="id_btn" value="왼쪽꺼 오른쪽으로 이동">
</body>
이동~
<script>
var v_dv1 = document.getElementById("id_dv1");
var v_dv2 = document.getElementById("id_dv2");
var v_btn = document.getElementById("id_btn");
var v_img1 = document.getElementById("id_img1");
var v_img2 = document.getElementById("id_img2");
v_btn.addEventListener("click",function(){
// 이미 존재하는 객체를 appendChid로 다른 곳에 붙이면 이동해버림
v_dv2.appendChild(v_img1);
v_dv1.appendChild(v_img2);
});
</script>더보기
<!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>
.nemo {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="nemo" id="id_dv1">
<img id="id_img1" src="images/all0.jpg" width=100 height=100>
</div>
<div class="nemo" id="id_dv2">
<img id="id_img2" src="images/all1.jpg" width=100 height=100>
</div><br>
<input type=button id="id_btn" value="왼쪽꺼 오른쪽으로 이동">
<script>
var v_dv1 = document.getElementById("id_dv1");
var v_dv2 = document.getElementById("id_dv2");
var v_btn = document.getElementById("id_btn");
var v_img1 = document.getElementById("id_img1");
var v_img2 = document.getElementById("id_img2");
v_btn.addEventListener("click",function(){
// 이미 존재하는 객체를 appendChid로 다른 곳에 붙이면 이동해버림
v_dv2.appendChild(v_img1);
v_dv1.appendChild(v_img2);
});
</script>
</body>
</html>
ex> 사진앨범! 돌리기
overflow: hidden; 넘치는애들 다 잘라
overflow: scroll; 넘치는애들 스크롤로
<!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>
#acja {
overflow: hidden;
width: 100px;
height: 100px;
border: 20px groove palevioletred;
}
#id_row {
width: 415px;
border: 1px solid palevioletred;
}
</style>
</head>
<body>
<div id="acja">
<div id="id_row">
<img id="id_img1" src="images/all0.jpg" width=100 height=100>
<img id="id_img2" src="images/all1.jpg" width=100 height=100>
<img id="id_img3" src="images/all2.jpg" width=100 height=100>
<img id="id_img4" src="images/all3.jpg" width=100 height=100>
</div>
</div>
<input id="id_btn" type=button value="돌리깅">
<script>
var v_row = document.getElementById("id_row");
var v_btn = document.getElementById("id_btn");
var v_imgNum = 1;
id_btn.onclick = function () {
v_row.appendChild(document.getElementById("id_img" + v_imgNum));
v_imgNum++;
if (v_imgNum > 4) {
v_imgNum = 1;
}
}
</script>
</body>
</html>얘두됑
<script>
var v_row = document.getElementById("id_row");
var v_btn = document.getElementById("id_btn");
var v_imgNum = 1;
var v_imgChildren = v_row.children; // array like
v_btn.addEventListener("click", function () {
v_row.appendChild(v_imgChildren[0]);
});
</script>