JAVASCRIPT STEP 42 - Template, Event

★ Template String

• %s, %d, %f etc..
• 사용 ex)

console.log('이름은 %s이고, 나이는 %d살입니다.', name, age);

• 문자를 나타내는 형식

//1. 'string'
//2. "string"
//3. `string` : `(역따옴표, backtick, backquote)

• 형식 ` 문구 입력 ${변수명}`

let message = `이름은 ${name}이고, 나이는 ${age}입니다. 만 나이로${age -1}살입니다. 


현재 시각은 ${new Date()} 입니다.`;
alert(message);

 

★ Event

• 이벤트 버블링(Event Bubbling) vs
• 이벤트 터널링(Event Tunneling, 이벤트 캡쳐링(Event Capturing)
• 자바스크립트는 기본적으로 이벤트 버블링만 발생한다.
• 단, 원하면 이벤트 터널링도 발생시킬 수 있다.

event.target.id           	// 유턴하는 객체 p3
event.srcElement.id     	// 유턴하는 객체 p3
this.id                     // onclick 객체 반환 p2
event.currentTarget.id 		// this와 동일

 

 

■ 이벤트 버블링(Event Bubbling)

• bom 방식

p1.onclick = function() {
     alert('빨강');
};

p2.onclick = function() {
    alert('노랑');
}

p3.onclick = function() {
    alert('파랑');
}

• dom 방식

//이벤트 버블링 구현
p1.addEventListener('click', function() {
    alert('빨강');
});

p2.addEventListener('click', function() {
    alert('노랑');
});

p3.addEventListener('click', function() {
    alert('파랑');
});

• 버블링을 막고 싶다면

event.cancelBubble = true;

 

■ 이벤트 터널링(Event Tunneling)

• DOM방식으로만 터널링을 구현 가능함.

//이벤트 터널링 구현(내려가면서 알림을 줌)
p1.addEventListener('click', function() {
    alert('빨강');
}, true); //여기를 true를 주면 이벤트 터널링이 작동

p2.addEventListener('click', function() {
    alert('노랑');
}, true);

p3.addEventListener('click', function() {
    alert('파랑');
}, true);

 

■ 응용 ex

• HTML 코드

<h1>테이블</h1>
<!-- table#tbl1>tr*10>td{lorem2}*5 -->
<table id="tbl1">
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
    <tr>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
        <td>lorem2</td>
    </tr>
</table>

• CSS 코드

<style>
    #tbl1 {
        border : 1px solid black;
        border-collapse: collapse;
    }
    #tbl1 td {
        border : 1px solid black;
        padding : 5px 15px;
    }

</style>

• JavaScript

const list =document.querySelectorAll('#tbl1 tr');

for (let i=0; i<list.length; i++) {

    list[i].onmouseover = function() {

        //event.target : <tr>(X), <td>(O)
        // event.target.bgColor = 'gold';

        // event.target.parentElement.bgColor = 'gold';

        event.currentTarget.bgColor = 'gold';

        this.bgColor = 'gold'; //안쓰는 것을 추천


    };
    list[i].onmouseout = function() {
        event.currentTarget.bgColor = 'transparent';
    };

};

• 실행 결과

마우스 커서가 위치해있을때 <tr>태그가 색상이 변함

■ 유사 배열

• 배열은 아닌데, 배열처럼 보이게 만든 객체

//HTMLCollection
const list1 = document.getElementById('tbl1').firstElementChild.children;
// list1.forEach(tr => tr.bgColor='gold');

//NodeList
const list2 =document.querySelectorAll('#tbl1 tr');
// list2.forEach(tr => tr.bgColor='gold');

// alert(list1.length);
// alert(list2.length);

// alert(list1==list2);

console.log(typeof list1, typeof list2);
console.log(list1.constructor.name, list2.constructor.name);

const nums = [10,20,30];
console.log(Array.isArray(nums));

//유사 배열
//- 배열은 아닌데, 배열처럼 보이게 만든 객체
console.log(Array.isArray(list1));  //HTMLCollection
console.log(Array.isArray(list2));  //NodeList

const names = {
    0 : '홍길동',
    1 : '아무개',
    2 : '하하하', 
    length:3
};

console.log(names[0]);
console.log(names[1]);
console.log(names[2]);
console.log(names.length);

//nums vs names > 출력
for(let i=0; i<names.length; i++) {
    console.log(i, names[i]);
}

nums.forEach(num=>console.log(num));

//유사배열 > 스트림 계열 메소드 미지원
names.forEach(num=>console.log(num));

• Array.from() : 유사배열을 진짜 배열로 바꾸는 함수

Array.from(names).forEach(name => console.log(name));

 

★ 이벤트 중단

• 1. 이벤트 버블링 중단

//a. event.cancelBubble = true > 비표준(MS)
//b. event.stopPropagation();  > 표준

• 2. 이벤트 중단

//a. return false;              > 비표준(MS)
//b. event.preventDefault();    > 표준