JavaScript HTML DOM: Event listener

JavaScript

JavaScript HTML DOM: Event listener

carrot62 2020. 7. 28. 17:22

HTML DOM이란?

Document Object Model의 약자로 document에 있는 각 object들을 동적으로 접근하기 위해 사용한다. HTML DOM은 각각의 HTML element에 접근하고, 추가하고, 삭제할 때 쓰이는 기준이다.

Method: an action we can do
ex) getElementById
Property: a value we can get or set
ex) innerHTML

Finding HTML elements	Changing HTML elements	Adding and Deleting HTML elements
document.getElementById(id)	element.innerHTML	document.createElement()
document.getElementsByTagName(name) -index 지정해 줄 것	element.attribute	document.rmoveChild/appendChild/replaceChild()
document.getElementByClassName(name) -index 지정해 줄 것	element.style.property	document.write()

querySelectorAll()
예) document.querySelectorAll("p.intro") : <p>태그를 가지고 class intro에 속해있는 모든 element를 찾는다
Tag name 또는 class name으로 여러 element를 찾을 때 그 중에서 첫 element에 접근하고 싶으면:

예) p 태그로 된 element중에서 첫 번째 element에 접근하고자 할때 :document.getElementsByTagName("p")[0].innerHTML

HTML 내용 바꾸기

document.write()
document.getElementById(id).innerHTML

JavaScript HTML DOM Animation

Animation을 만들 때 항상 container는 항상 style="position:relative" 이고, animation element는 style="position:absolute" 이다. setInterval 함수를 이용해서 일정 시간마다 action이 일어날 수 있도록 한다.

예제:

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

JavaScript HTML DOM Events

inline 방법을 안 쓰고 javascipt를 이용해 이벤트를 추가하는 것이 가능하다.

<!DOCTYPE html>
<html>
<body>

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;	//"onclick"이라는 이벤트 추가

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

onclick
onload
onunload
onchange: input field에서 많이 쓰인다
onmouseover

예시) 사진 슬라이드쇼

위의 각 항목을 마우스로 지나갈 때마다 제일 큰 메인 사진이 바뀌도록 만든 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function slideshow1(){
            document.getElementsByClassName("main")[0].style.backgroundImage= "url('./img/show1.jpg')" ;
        }
        function slideshow2(){
            document.getElementsByClassName("main")[0].style.backgroundImage="url('./img/show2.jpg')" ;
        }
        function slideshow3(){
            document.getElementsByClassName("main")[0].style.backgroundImage="url('./img/show3.jpg')" ;
        }

    </script>
    <style>
        .s1{
            background-image: url('./img/show1.jpg');
        }
        .s2{
            background-image: url('./img/show2.jpg');
        }
        .s3{
            background-image: url('./img/show3.jpg');
        }
        .main{
            background-image: url('./img/show1.jpg');
            background-size: cover;
        }
    </style>
</head>
<body>
    
    <section>
        <div class="slide s1" onmouseover="slideshow1()"></div>
        <div class="slide s2" onmouseover="slideshow2()"></div>
        <div class="slide s3" onmouseover="slideshow3()"></div>
    </section>

    <div class="main"></div>

    
</body>
</html>

onmouseout
onmousedown
onmouseup

JavaScript HTML DOM Event Listener

Javascript와 HTML content를 분리 시켜주기 때문에 코드를 해석할 때 더 편하다. (element안에 일일이 이벤트를 걸 필요 없이 <script> 부분에서 Event Listener를 이용해서 여러 이벤트를 얼마든지 걸어주는 것이 가능하다)

형식:

element.addEventListener(event, function, useCapture);
// 예시)document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener()
removeEventListener()

예시) 버튼을 눌렀을 때 현재 날짜와 시간이 뜨게 한다면

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

이벤트를 추가할 때 다음 두가지 방법은 동일하다:

document.getElementById("id").addEventListener("click", displayDate());
//또는
document.getElementById("id").onclick= function(){	//이렇게 함수를 바로 정의해주는 것도 가능하다
	document.getElementById("demo").innerHTML = Date();

}

HTML 이벤트를 모두 사용할 수 있다, 단 앞에 "on"을 제거하고 사용 할 것
- 예시) onclick, onmousedown, 등...
같은 element에 여러개의 event를 거는 것이 가능하다

element.addEventListener("click", myFunction);
element.addEventListener("mouseover", mySecondFunction);

로딩 후에 함수가 작동하도록 설정하는 방법:

이렇게 하면 굳이 script 위치를 뒤에 위치 시키지 않아도 "load" 이벤트 때문에 로딩이 다 완료된 후에 잘 실행된다.

<script>
window.addEventListener("load", load);

function load(){
	//load된 후에 작동할 함수들 정의
}
</script>

Window object에 event 거는 방법

document. 대신 window. 를 사용한다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

load
resize

Event propagation in HTML DOM

Bubbling
- 이벤트가 <p>,<div>등 다른 element에 의해 중첩 되어 있을 때 가장 안에 있는 event가 먼저 실행되고 바깥에 있는 element의 event는 나중에 실행된다.
Capturing
- 가장 바깥에 있는 element의 event가 먼저 실행된다

addEventListener(event, function, useCapture);

Event listener 형식 파라미터 중 젤 마지막에 있던 useCapture 값을 통해 bubbling(false, default value) 또는 capturing(true) 방식으로 설정해 줄 수 있다.

DOM nodes

W3C HTML standard에 의하면 HTML document에 있는 모든 것이 node이다.

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

<title id="demo">DOM Tutorial</title>

<script>
/*다음 두 구문은 동일하게 title의 text node인 "DOM Tutorial"를 의미한다*/
var myTitle = document.getElementById("demo").innerHTML;
var myTitle = document.getElementById("demo").firstChild.nodeValue;
/*이 상황에서는 inner.HTML == firstChild == childNodes[0]*/
</script>

HTML 문서 전체에 접근하는 방법:

document.body: 문서의 body
document.documentElement: 문서 전체

다른 속성

nodeName
- 읽기만 가능하다(안의 내용은 변경 불가능하다)
- tag name과 동일하다
nodeValue
nodeType

자바스크립트를 이용해서 element(nodes) 생성하기

새로운 element를 생성하는 과정:

documnet.createElement("p"): element 새로 만들기
element 예) p, h1, div 등...
document.createTextNode: element 안에 들어갈 node 만들기 (예: text node)
[만든 element 변수 이름].appendChild: 만든 element에 들어갈 node를 붙이기(append)
element.appendChild(): 원래 있던 element에 새로 만든 element를 덧붙이기

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

다른 방법:

insertBefore() :기존에 있던 element에 다른 element를 덧붙이는 방법
remove(): 기존에 있던 HTML element를 제거한다
replaceChild()

JavaScript HTML DOM collections

HTMLCollection은 HTML elements의 array-like list(collection)이다. 배열처럼 보이지만 배열과 동일하지 않다.

getElementsByTagName
- [0,1,2...] 인덱스로 접근한다

function myFunction() {
  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {	//인덱스를 이용해서 각각의 속성 변경
    myCollection[i].style.color = "red";
  }
}

length: HTML collection의 길이를 의미하는 속성

JavaScript HTML DOM Node lists

NodeList: a collection(list) of nodes extracted from a document
getElementsByClassName()
querySelectorAll()
length

HTML Collection vs NodeList

HTML Collection	NodeList
a collection of HTML elements	a collection of document nodes
name, id, index number로 접근이 가능하다	index number로만 접근 할 수 있다