이벤트 - 리스너 등록하기
http://localhost:8080/javascript/ex06/exam01-1.html

리스너 : 이벤트가 발생했을 때 호출되는 메소드
이벤트가 발생했을 때 이런 이런 일을 하라
이벤트를 다루는 함수

리스너(listener) = 이벤트 핸들러(event handler)
이벤트가 발생할 때 호출되는 메서드이다.
HTML 태그나 자바스크립트 코드에서 이벤트에 대해 함수를 등록해야 한다.

어떤 객체의 상태가 바뀌었을 때 보고하겠다
사람도 아닌데 어떻게 보고를..?
메소드를 호출하는 게 보고하는 거

click 이벤트에 대해 리스너를 등록하는 방법
1) HTML 태그의 onclick 속성에 자바스크립트 코드를 넣는다.

인라인 이벤트 모델
on-으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결하는 것을 인라인 이벤트 모델이라고 부른다.
인라인 이벤트 모델을 HTML 요소의 on- 속성에 자바스크립트 코드를 넣는 것이다.

<button id="btn1-1"  onclick="var str='Hello'; window.alert(str);">버튼1-1</button><br>

onclick 속성에 자바스크립트 코드를 넣는다.
바깥에 큰따옴표 있으니까 안쪽에서는 작은따옴표 사용하기
이 방식은 태그 안에 자바스크립트 코드가 섞여 있기 때문에 유지보수할 때 힘들다.
자바스크립트 코드가 간단하면 쓰는 경우도 있다.
태그 안에 자바스크립트 코드를 넣어야 하기 때문에 긴 코드를 넣기가 불편하다.
코드가 길면 별도의 자바스크립트 메소드로 만들어서 뺀다.
그런 후에 함수를 onclick에서 호출하도록 한다.

<button id="btn1-2" onclick="btn1Click()">버튼1-2</button><br>

<script>
function btn1Click() {
  var str = "Hello";
  window.alert(str);
}
</script>

2) 태그 객체의 onclick 프로퍼티에 함수를 등록한다.

사용자가 태그를 클릭하면 onclick이라는 이름으로 등록된 함수를 호출한다.

이 방식은 이벤트에 대해 한 개의 리스너만 등록할 수 있다.

var btn2 = document.getElementById("btn2");
// var btn2 = document.querySelector("#btn2"); // 둘 중 아무거나 사용하면 된다.

function f1() {
    var str = "Hello2a!";
    window.alert(str);
    console.log(this); // this는 이 함수가 소속된 객체를 통해 호출될 때 그 객체를 가리킨다.
}
btn2.onclick = f1; // 함수의 주소를 객체 프로퍼티로 저장하는 순간 그 객체에 소속된다.

btn2.onclick = f1;
f1 함수 주소를 onclick에 할당
f1이 가리키는 함수나 onclick이 가리키는 함수나 같은 함수

↑ 보통은 이렇게 선언적 함수를 따로 정의하고 그 함수 주소를 넣는 식으로 안 함

↓ 보통은 익명 함수를 바로 정의

btn2.onclick = function () {
    var str = "Hello2b!";
    window.alert(str);
    console.log(this); // 일반 함수에서 this는 그 함수가 소속된 객체이다.
};

btn2.onclick = function () {}
함수를 onclick에 저장하겠다는 게 아님!!
1. 먼저 익명 함수를 정의한다.
2. 익명 함수 객체가 만들어진다.
3. 그런 후에 함수 객체 주소를 onclick에 저장하겠다.
onclick이라는 이름으로 btn2에 저장하겠다
onclick이라는 변수에 저장하겠다는 게 아님

자바스크립트 객체를 표현할 때 key, value로 그림
자바스크립트 객체는 일종의 key, value 덩어리

btn2라는 객체에 onclick이라는 이름으로 함수 객체 주소를 저장하겠다

익명함수 정의
함수 객체 주소를 onclick으로 저장하겠다는 뜻
onclick 이라는 이름으로 btn2에 저장하겠다
자바스크립트는 자바랑 다름
일종의 key, value 덩어리
변수라는 개념이 아님
onclick이 변수가 아니라 key
onclick은 변수명이 아니라 key
key: 값을 저장할 때 사용할 이름
이게 자바하고 다른 점이다

자바스크립트가 변수가 아니라 이름으로 사용하니까 이런 게 가능한 거

btn2.onclick();btn2["onclick"]();
key니까 이렇게 사용 가능

자바스크립트에서 객체는 key, value로 다뤄진다
그림 기억하기!

variable이라고 안 하고 property 라고 함
객체에 저장하는 속성
속성명 property name
속성값 property value

함수를 만든다 → 함수 정의

버튼을 클릭했을 때 호출될 함수를 등록하는 거 ↓

btn2.onclick = function() {
    var str = "Hello2b!";
    window.alert(str);
    console.log(this); // 일반 함수에서 this는 그 함수가 소속된 객체이다.
};

화살표 함수로 함수 정의

btn2.onclick = () => {
  var str = "Hello2c!";
  window.alert(str);
  console.log(this); // arrow function에서 this는 window 객체이다.
};

arrow function에서 this는 window 객체이다.

지금까지 방법으로는 리스너를 한 개 밖에 등록 못 함

3) 태그 객체의 addEventListener()를 이용하여 호출될 함수를 등록한다.

모든 HTML 태그 객체는 EventTarget() 생성자에 의해서 초기화되었다. 그러므로 모든 태그는 addEventListener(), removeEventListener(), dispatchEvent() 메소드를 갖고 있다.

특히 여러 개의 리스너를 등록할 수 있다.

문서 객체.addEventListener(이벤트 이름, 콜백함수);
주의!
클릭 이벤트의 이름은 "onclick"이 아니라, "click"이다.

https://developer.mozilla.org/en-US/docs/Web/API

HTML 버튼 태그는 내부적으로 자바스크립트 객체를 만들 때 HTMLButtonElement 생성자를 통해서 버튼 태그 객체를 만든다.

HTMLButtonElement의 상속 관계

https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement

하나 밖에 없는 게 아니라 HTMLButtonElement 생성자가 하나 추가한 거고
상위 생성자가 추가한 게 있을 거임

3개 밖에 없는 게 아님
슈퍼 생성자로 이동해야 됨
HTMLElement 생성자로 이동한다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

HTMLElement를 상속받아서 만든 모든 태그 객체는 이 이벤트를 다 갖고 있다.

click 이라는 이벤트가 없다.
Element 생성자로 이동한다.

https://developer.mozilla.org/en-US/docs/Web/API/Element

이벤트 이름 : click
이벤트가 발생했을 때 호출될 메소드를 등록할 이름 : onclick

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event

click도 이벤트 객체

이벤트 핸들러의 이름은 onclick이라고 자세하게 나와 있음

버튼에 클릭했을 때 호출될 함수를 등록

addEventListener 파라미터에는 이벤트 이름이 들어가야 됨

클릭 이벤트 이름은 click

함수가 밑에 있는데 어떻게 함수 주소를 주냐
함수 정의는 호이스팅된다. 먼저 실행된다.
그래서 함수 정의가 밑에 있어도 괜찮다.
어차피 실행하기 전에 자동으로 위로 올라간다.

btn3.addEventListener("click", btn3Click);
function btn3Click() {
  var str = "Hi1!!";
  window.alert(str);
  console.log(this); // this는 btn3 객체이다.
}

옛날 방식 ↑

보통은 익명 함수를 바로 집어 넣는다.
함수의 주소를 바로 놓는다.
click 이라는 이벤트가 발생했을 때 호출될 함수를 만든 후에 그 함수의 주소를 이 자리에 놓는 거
익명 함수를 만든 후에 함수 주소가 놓이는 거

btn3.addEventListener("click", function () {
  var str = "Hi2!!";
  window.alert(str);
  console.log(this); // this는 btn3 객체이다.
});

화살표 함수

btn3.addEventListener("click", () => {
  var str = "Hi3!!";
  window.alert(str);
  console.log(this); // this는 window 객체이다.
});

addEventListener는 태그에 원하는 만큼 여러 개의 리스너를 등록할 수 있다.

onclick은 한 개만 등록 가능

addEventListener는 리스너 여러 개 등록 가능해서 3개 다 실행됨

한 개 등록할 때는 주로 onclick 사용

이벤트 - 리스너 실행 순서

http://localhost:8080/javascript/ex06/exam01-3.html

한 태그에 세가지 방법으로 등록된 리스너가 있을 때 호출되는 순서는?

만약 태그 객체에 대해 onclick 프로퍼티로 리스너를 등록했다면,
태그의 (인라인 이벤트 모델) onclick 속성에 등록된 자바스크립트 코드는 실행되지 않는다.

주의!
호출 순서에 의존하여 코드를 작성하지 말라!

이벤트 - 각 태그 객체에 따로따로 이벤트 리스너를 등록해야 한다.

ex06/exam01-4.html
http://localhost:8080/javascript/ex06/exam01-4.html

querySelectorAll()의 리턴 값은 태그가 들어 있는 NodeList 이다.
NodeList 는 태그 객체가 아니다.
따라서 addEventListener() 함수가 없다.
NodeList는 태그 객체가 아니므로 onclick 프로퍼티도 없다.

NodeList에 onclick이라는 프로퍼티를 추가 → 에러 안 뜸
NodeList에 onclick이라는 이름으로 함수를 등록해봐야 아무런 의미가 없다.
NodeList도 객체니까 프로퍼티를 추가할 수 있다. onclick이라는 이름으로 값을 추가한 거. 태그는 아니기 때문에 호출은 안 됨.

다음 코드는 의미 없다.

el.onclick = () => {
  console.log(this);
};

NodeList를 반복문으로 돌려서 태그를 하나씩 꺼내서 이벤트 리스너를 추가해야 된다.

for (var e of el) {
	e.onclick = function() {
		console.log(this);
	}
}

같은 함수를 3개 만드는 거라 메모리 낭비
(스크립트 엔진이 스스로 optimizing 하는 경우가 있음)

버튼을 클릭했을 때 호출될 함수를 바깥쪽에 만들어 놓고
함수는 한 개만 만들고 같은 함수 주소를 3개의 태그에 등록한다
바깥쪽에 함수를 정의하고 같은 함수 주소를 준다
버튼을 클릭하면 같은 함수가 호출되는 거
메모리 절약

function f1() {
  console.log(this);
}
for (var e of el) {
  e.onclick = f1
}

이벤트 - 이벤트 정보 다루기 I

ex06/exam02-1.html
http://localhost:8080/javascript/ex06/exam02-1.html

이벤트가 발생하면 웹브라우저는 이벤트 정보를 담은 객체를 리스너에 전달한다.

이벤트가 발생하면 웹브라우저는 이벤트 정보를 객체에 담아서 리스너를 호출할 때 파라미터로 전달한다.

이벤트 리스너는 첫 번째 매개변수로 이벤트 객체(event object)를 받는다.
이벤트 객체에는 이벤트와 관련된 정보가 들어 있다.

이벤트 객체는 이벤트 종류에 따라 미리 정의된 생성자에 의해서 초기화된다.
이벤트 종류에 따라 특정 생성자가 이벤트 객체를 준비한다.

‐ 마우스 클릭, 더블클릭, 누를 때, 뗄 때 - MouseEvent() 생성자가 초기화시킨다.
‐ 키보드에서 키를 누를 때, 뗄 때, 눌렀다 뗄 때 - KeyboardEvent() 생성자가 초기화시킨다.

키보드 이벤트인 경우 event 객체에는 키보드와 관련된 정보가 들어 있다.

포커스 이벤트인 경우 event 객체에는 포커스를 얻은 이벤트인지, 포커스를 잃은 이벤트인지 정보가 들어 있다.

태그의 onclick 속성에 자바스크립트 코드를 둘 때 이벤트 정보를 사용하는 방법?
⇒ "event" 라는 이름으로 정의된 객체가 있다. 그 객체를 사용하면 된다.
⇒ 이 event 객체는 MouseEvent()가 초기화시킨 객체이다.
⇒ 즉 MouseEvent() 생성자가 추가한 속성을 사용할 수 있다.

MouseEvent 주요 속성
altKey : Alt 키 누름 여부
ctrlKey : Ctrl 키 누름 여부
button : 누른 버튼 번호
offsetX/Y : 버튼 영역을 기준으로 X/Y 좌표
clientX/Y : 웹브라우저 내용창을 기준으로 X/Y 좌표
screenX/Y : 바탕화면 영역을 기준으로 X/Y 좌표

<button id="btn1" onclick="console.log(event)">버튼1</button><br>

버튼 클릭!

버튼 클릭했는데 MouseEvent가 아니라 PointerEvent

button: 0
왼쪽 버튼: 0
오른쪽 버튼: 1
가운데 버튼: 2

shiftKey: false
클릭할 당시 shift키는 안 눌렀다

마우스 이벤트 좌표 정보

offsetX/Y : 버튼 기준
clientX/Y : 웹 브라우저 기준
screenX/Y : 모니터 기준

이벤트 - 이벤트 정보 다루기 II

ex06/exam02-2.html
http://localhost:8080/javascript/ex06/exam02-2.html

함수를 호출할 때 함수에 이벤트 정보를 전달하는 방법

모든 이벤트 리스너는 첫 번째 매개변수로 event 객체를 받는다.

태그의 인라인 이벤트 모델 onclick 속성에서는 정해진 이름으로 써야 됨
event 라고 써야 됨

event ← built-in 객체

메소드 호출할 때 event 객체를 넘겨준다.
이벤트 리스너에는 event 객체를 받는 파라미터가 있어야 한다. 보통 e 라고 한다.

onclick="btn1Click(event)"

<button id="btn1" onclick="btn1Click(event)">버튼1</button><br>
function btn1Click(e) {
  console.log(e);
}

버튼 클릭하니까 PointerEvent

이벤트 - 이벤트 정보 다루기 III

ex06/exam02-3.html
http://localhost:8080/javascript/ex06/exam02-3.html

id가 부여된 태그는 window 객체를 통해 바로 접근할 수 있다.
window.btn1.onclick

<button id="btn1">버튼1</button><br>
window.btn1.onclick = function () {
	console.log("test..ok!");
};

앞에 window 생략 가능함
글로벌 변수.. id와 같은 이름의 변수를 선언했을 수도 있고.. 그러면 기존 거를 덮어쓰게 됨.. 그런 상황을 방지하기 위해 이 방법은 되도록 쓰지 말기.... 비추! 다음처럼 태그를 찾아서 등록하기!

document.getElementById("btn1").onclick

자바스크립트는 파라미터를 선언 안 했는데 값을 넘겨줘도 아무런 문제가 없다
어차피 그 값들은 다 arguments에 저장된다. 이왕이면 arguments에서 꺼내는 것보다는 직접 파라미터로 받는 게 나음
이벤트를 받고 싶으면 파라미터 선언하기!

arguments에 다 담겨 있음
그래도 이왕이면 이벤트를 받고 싶으면 arguments에서 꺼내는 것보다는 직접 파라미터로 받는 게 나음
파라미터는 event 라고 해도 됨. 로컬변수여서 충돌 안 일어남.
event라고 적어도 되고 e로 적어도 되는데
보통은 간략하게 e라고 적음
이벤트를 받고 싶으면 파라미터 선언하기!

이벤트 - 이벤트 정보 다루기 IV

http://localhost:8080/javascript/ex06/exam02-4.html

addEventListener

HTMLCollection은 태그가 아니기 때문에 addEventListener가 없음

태그 객체를 리턴 받아서 addEventListener를 호출

파라미터 지정해주기
지정 안 하면 arguments에서 꺼내야 됨
var e = arguments[0];
이렇게 하지 말고 파라미터 선언하기

리스너를 등록할 때 이벤트 객체를 받을 파라미터를 선언하는 게 편하다
이벤트 객체를 쓸 일이 없으면 파라미터 없어도 됨
이벤트가 발생했을 때 그 이벤트 정보가 필요하면 파라미터를 선언해서 받아라
파라미터가 없어도 이벤트 객체는 넘어온다
넘어온 객체는 arguments에 보관되어 있다
그렇지만 파라미터를 선언하는 게 편하다

웹 브라우저가 넘겨준 이벤트 객체를 받는 방법

이벤트 - 이벤트가 발생된 태그 알아내기

ex06/exam03-1.html
http://localhost:8080/javascript/ex06/exam03-1.html

메소드 한 개를 가지고 여러 버튼에 등록을 했을 때

this
리스너가 소속된 객체. 그 객체에 이벤트가 발생한 거.

버튼의 속성값을 꺼내고 싶다
this.getAttribute("data-no")

리스너가 일반 함수익명 함수일 경우, this가 가리키는 객체가 이벤트가 발생된 객체이다.

개발자가 태그에 임의로 추가한 속성은 다음과 같이 일반적인 방법으로 꺼낼 수 없다.

console.log(this["data-no"]); // undefined

개발자가 임의로 추가한 속성인 경우 반드시 getAttribute()를 사용해야 한다.

태그에 원래 있던 속성이라면 일반적인 문법으로 접근할 수 있다.

console.log(this["id"]);
console.log(this.id);    // OGNL 표기법

이벤트 - 이벤트가 발생된 태그 알아내기 II

ex06/exam03-2.html
http://localhost:8080/javascript/ex06/exam03-2.html

arrow function에서 이벤트가 발생한 객체 알아내기

arrow function인 경우 this는 window 객체를 가리킨다.

파라미터로 이벤트 객체를 받아서 그 이벤트 객체를 통해서 알아낼 수 있다.
이벤트 객체에 이벤트가 발생된 태그 객체의 주소가 들어 있다.

e.target

document.getElementById("btn1").addEventListener("click", (e) => {
  console.log(this); // window 객체이다.
  
  // 이벤트 객체에 이벤트가 발생된 태그의 주소가 들어 있다.
  console.log(e.target);
  
  // 이벤트가 발생한 객체의 속성 값 알아내기
  console.log(e.target.getAttribute("data-no"));
});

이벤트 - 이벤트가 발생된 태그 알아내기 III

ex06/exam03-3.html
http://localhost:8080/javascript/ex06/exam03-3.html

this ← 이벤트가 발생된 객체
e.target ← 이벤트가 발생된 객체

this.getAttribute("data-no")
            ∥
e.target.getAttribute("data-no")

결과는 같음

스타일 조작하기

자바스크립트에서는 - 기호를 식별자로 사용할 수 없으므로, 두 단어 이상의 속성은 다음과 같이 캐멀 케이스로 나타낸다. - 기호를 제거하고, - 기호 뒤의 알파벳을 대문자로 변경한 형태이다.

CSS 속성 이름: background-color
자바스크립트 style 속성 이름 : backgroundColor

for (var e of el2) {
  e.style.backgroundColor = "yellow";
}

style 객체는 다음과 같은 방법으로도 스타일을 조정할 수 있다.

for (var e of el2) {
  e.style["background-color"] = "yellow";
}
for (var e of el2) {
  e.style["color"] = "blue";
}
for (var e of el2) {
  e.style["border"] = "1px dashed blue";
}

중간에 - 기호를 포함하는 경우 대괄호[] 사용
- 기호를 포함하지 않는 경우는 OGNL 표기법 가능 ⇒ e.style.border
일관성 있게 스타일을 다룰 수 있도록 속성 추가
e.style.backgroundColor

이벤트 발생과 전달 과정

ex06/exam04-1.html
http://localhost:8080/javascript/ex06/exam04-1.html

버튼을 클릭하면 이벤트가 전달됨
capture phase : document에서 목적지 부모까지 오는 거
target phase : 목적지에 도달하는 단계
bubble phase : 목적지에서 다시 부모로 올라가는 거

이벤트가 바로 전달되는 게 아니라 부모를 거쳐서 전달됨
전달되고 난 다음에 끝나는 게 아니라 거꾸로 상위 부모를 따라 올라간다

일반적인 방법으로 이벤트 리스너를 등록하면 이벤트가 발생했을 때 target과 bubble 단계에서 호출된다. 부모들에 등록된 함수가 있다면 그 함수들도 호출된다.

이벤트 리스너 등록 = 이벤트 핸들러 등록

root element

그 부모들에 등록된 함수가 있다면 그 함수들도 호출된다.

target 단계에서만 호출되는 게 아니라 bubbling 단계에서도 호출된다.

body 태그의 리스너는 body 태그에 이벤트가 발생했을 때 뿐만 아니라 body의 자식 태그에 이벤트가 발생했을 때도 버블링 단계에서 호출된다.

이벤트 - bubble 대신 capture와 target 단계에서 호출되는 리스너 등록하기

ex06/exam04-2.html
http://localhost:8080/javascript/ex06/exam04-2.html

addEventListener(이벤트 타입, 리스너, 캡쳐 여부)

세 번째 파라미터 값을 true 라고 하면 capture 단계에서 호출된다.
기본은 false이다.

document.body 이거 많이 씀

정리!
addEventListener(이벤트, 리스너, false) : target, bubble 단계일 때 리스너가 호출된다.
­ - 세 번째 파라미터가 없으면 기본이 false이다.
addEventListener(이벤트, 리스너, true) : capture, target 단계일 때 리스너가 호출된다.

이벤트 - 이벤트 전파 막기

ex06/exam04-3.html
http://localhost:8080/javascript/ex06/exam04-3.html

이벤트가 발생하면 capture-target-bubble 단계로 진행한다.
target 단계에서 bubble 단계로 진행하는 것을 막지 않으면
부모 태그에 등록된 리스너까지 호출되는 문제가 발생한다.

방법1: Event.stopPropagation() 호출한다.
‐ 이벤트 bubbling을 막는다.
‐ 단 target에 등록된 함수는 모두 호출된다.

부모로 올라가는 버블만 막음

e.stopPropagation();

방법2: Event.stopImmediatePropagation()을 호출한다.
‐ 이벤트 bubbling을 막는다.
‐ target에 등록된 함수라도 즉시 현 함수에서 실행을 마감한다.

첫 번째 리스너만 실행하고 끝남

e.stopImmediatePropagation();

버블만 막고 싶으면 stopPropagation()
현재 실행 중인 리스너가 끝나는 순간 막고 싶으면 stopImmediatePropagation()

이벤트 - 이벤트 전파 기능을 이용하기

exam04-4
http://localhost:8080/javascript/ex06/exam04-4.html

버블링 단계를 이용해서 일부러 부모 태그에 리스너를 등록한다.

for문으로 리스너 등록

e.target : 이벤트가 발생한 객체
e.currentTarget : 이벤트 리스너가 등록된 태그. 실제 리스너가 호출된 태그. 현재 리스너가 호출된 태그가 어느 태그냐

a 태그를 눌렀을 때만 동작함
a 태그를 조금이라도 벗어나면 안 됨
a 태그에 리스너를 등록시키면 a 태그를 눌러야만 동작
a 태그에 border 주기
테두리 경계 안을 눌러야 됨

부모 태그에 리스러를 등록하면 편함
이것들의 부모는 tr 태그
tr 태그 안에 td 태그 있고, td 태그 안에 a 태그 있음
tr 태그에 리스너 등록
tr 태그의 자식 태그를 눌러도 어차피 버블링 돼서 a 태그를 눌러도
버블링 되면서 td에 등록된 리스너를 찾는다
tr에 등록된 리스너를 찾는다
결국 tr 태그에 등록된 리스너가 호출된다
일부러 버블링 될 때 호출되게 하는 거
버블링 되면서 부모 태그에 등록한 리스너가 호출된다.

부모의 자손 중에서 어떤 태그를 눌러도 부모에 등록된 리스너가 호출된다.
버블링 되기 때문에
버블링 단계를 일부러 이용해서 이렇게 처리한 거

이벤트 - 프로그래밍으로 이벤트 발생시키기

ex06/exam05-1.html
http://localhost:8080/javascript/ex06/exam05-1.html

MouseEvent로 이벤트 만들기

var myEvent = new MouseEvent("click");

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent

이벤트 - 커스텀 이벤트 발생시키기

ex06/exam05-1.html
http://localhost:8080/javascript/ex06/exam05-1.html

javascript에 정의된 이벤트가 아닌 개발자가 임의의 이벤트를 만들어 발생시킬 수 있다.
=> Event() 생성자를 사용해서 이벤트 객체를 만들어야 한다.

dispatchEvent

var myEvent = new CustomEvent("ohora", 객체(주소)); 

객체를 만들어서 그 객체 주소를 넣는 거

그 객체는 한 번 넘겨주면 그 객체를 다른 데 쓸 일이 없다면 객체를 바로 정의

중괄호 만나면 당황하지 말기
객체 만들어서 그 주소 넘기는 거

$.ajax({
  ...
});

자바스크립트에서는 $를 변수명으로 사용할 수 있다.

객체에 값을 담아서 던지겠다는 거

파라미터 여러 개 던지는 것보다 객체에 담아서 던지는 게 편함

var myEvent = new CustomEvent("ohora", {detail: {name:"홍길동", age:20, tel:"1111-2222"}}); 

이벤트 - a 태그의 기본 동작을 중단시키기

ex06/exam06-1.html
http://localhost:8080/javascript/ex06/exam06-1.html

태그의 onclick 속성에 작성하는 스크립트에 return false 라고 입력

바깥에 함수 한 개 정의하고 onclick 속성에 작성하는 스크립트에 함수 호출

태그.onclick = function() {return false}

태그.onclick = function(e) {e.preventDefault()}

태그.addEventListener("click", function() {return false})

태그.addEventListener("click", function(e) {e.preventDefault()})

e.preventDefault();
a 태그의 기본 동작을 비활성화시킨다. 리스너 호출이 끝난 후 서버에 요청하지 않는다. http 요청을 안 하는 거

addEventListener()로 함수를 등록하면 return false로 a 태그의 기본 동작을 취소할 수 없다.

이벤트 - form의 submit 동작을 중단시키기

http://localhost:8080/javascript/ex06/exam06-2.html

button type="submit"
지정 안 하면 기본이 submit

submit 이벤트가 발생
기본 행위를 취소

return true 하거나 아예 안 적어도 서버에 전송

type="button" 일반 버튼은 서버에 전송을 수행하지 않는다.

0개의 댓글