function Person(name) {
this.name = name;
}
var kim = new Person('kim');
var lee = new Person('lee');
console.log(kim.name); //kim
console.log(lee.name); //lee
화살표 함수(Arrow function)에서의 this
함수 안에서 this가 전역 객체가 되는 경우, 화살표 함수로 사용하면 된다.
화살표 함수는 this를 새로 정의하지 않고, 바로 바깥 함수나 클래스의 this를 사용한다.
var Person = function (name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this); // Person {name: "Nana", age: 28}
setTimeout(function () {
console.log(this); // Window
console.log(this.name + ' is ' + this.age + ' years old');
}, 100);
};
};
var me = new Person('Nana', 28);
me.say(); //global is undefined years old
var Person = function (name, age) {
this.name = name;
this.age = age;
this.say = function () {
console.log(this); // Person {name: "Nana", age: 28}
setTimeout(() => {
console.log(this); // Person {name: "Nana", age: 28}
console.log(this.name + ' is ' + this.age + ' years old');
}, 100);
};
};
var me = new Person('Nana', 28); //Nana is 28 years old
// 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해 참조 가능
<input type="button" onclick="alert('Hello world, ' + this.value);" value="button" />
// script 탭에 함수를 만들고 태그에 지정하는 방식
<button onclick="myHandler1(); myHandler2();">Click me</button>
<script>
function myHandler1() {
alert('myHandler1');
}
function myHandler2() {
alert('myHandler2');
}
</script>
객체나 요소에 프로퍼티로 등록하는 방법
자바스크립트 코드에서 프로퍼티로 등록하거나, HTML 태그에 속성으로 등록할 수 있다.
각 방법들은 오직 하나의 이벤트 핸들러만 등록가능하거나, 가독성 및 유지보수성 저하라는 단점이 있다.
// JS코드에서 프로퍼티 등록 - 오직 하나의 이벤트만 등록이 가능.
window.onload = function() { // HTML 문서가 로드될 때 실행
var text = document.getElementById("text");
text.innerHTML = "HTML 문서가 로드되었음";
}
// HTML 태그에 속성으로 등록 - 가독성 및 유지보수성 저하
<p onclick="alert('문자열을 클릭했어요!')">ㅎㅇ</p>
addEventListener() 메서드 활용
addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 등록한다.
해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.
addEventListener 함수 방식은 이전 방식에 비해 아래와 같이 보다 나은 장점을 갖는다.
하나의 이벤트에 대해하나 이상의 이벤트 핸들러를 추가할 수 있다.
캡처링과 버블링을 지원한다.
모든 DOM 요소(HTML, XML, SVG)에 대해 동작한다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성한다.
var btn = document.getElementById("btn");
btn.addEventListener("click", clickBtn);
btn.addEventListener("mouseover", mouseoverBtn);
btn.addEventListener("mouseout", mouseoutBtn);
function clickBtn() {
document.getElementById("text").innerHTML = "클릭"
}
function mouseoverBtn() {
document.getElementById("text").innerHTML = "마우스오버";
}
function mouseoutBtn() {
document.getElementById("text").innerHTML = "마우스아웃";
}
// 삭제
function clickBtn() {
btn.removeEventListener("mouseover", mouseoverBtn);
btn.removeEventListener("mouseout", mouseoutBtn);
document.getElementById("text").innerHTML = "삭제 완료";
}
