1. this
✔자바스크립트
호출한 놈 = this (호출하는 객체에 따라 this가 바뀜) / 생성자 함수일 때는 자기자신
✔자바
자기자신의 객체 = this
function divHandler(event){ //이벤트 객체
console.log("divHandler!")
console.log("this: " + this);
this.style.backgroundColor = "#000000";
}2. 이벤트
사용자가 특정한 행동을 했을 때 동적으로 실행되는 프로그램.
인라인 모델
<script>
function headerClick(){
console.log("click!");
//이벤트 제거
var ce = document.getElementById("cEvent");
console.log(ce);
ce.onclick = null;
ce.ondblclick = null;
}
</script>
</head>
<body>
<div id="cEvent" ondblclick="headerClick();"> <!-- 더블 클릭하면 콘솔 창에 click!출력 됨. -->
click event
</div>
</body>기본 모델
<style>
#cEvent {
width: 200px; height: 100px;
line-height: 100px;
text-align: center;
font-size: 1.2em;
background-color: #f00;
color: #fff;
font-weight: bolder;
}
</style>
<script>
onload = function(){
var ce = document.getElementById("cEvent");
ce.onclick = function(){
console.log("click!");
//이벤트 제거
//ce.onclick = null;
}
//방법2
ce.onclick = clickEventHandler;
function clickEventHandler(){
console.log("clickEventHandler!");
//이벤트 제거
//ce.onclick = null;
}
}
</script>
</head>
<body>
<div id="cEvent">click Event</div>
</body>표준 핸들러 모델
<style>
#cEventAdd {
width: 200px; height: 100px;
line-height: 100px;
text-align: center;
font-size: 1.2em;
background-color: #f00;
color: #fff;
font-weight: bolder;
}
#cEventRem {
width: 200px; height: 100px;
line-height: 100px;
text-align: center;
font-size: 1.2em;
background-color: #0f0;
color: #fff;
font-weight: bolder;
}
</style>
<script>
window.onload = function () { //<body>객체가 다 실행되고 나서 스크립트 함수 실행
function addHandler() {
console.log("click!!");
}
function removeHandler() {
console.log("event remove!!");
ceA.removeEventListener("click", addHandler);
}
var ceA = document.getElementById("cEventAdd");
ceA.addEventListener("click", function addHandle() { //"click"은 정해져있는 이벤트 명, addHandle()은 콜백함수
console.log("click!!");
});
var ceR = document.getElementById("cEventRem");
ceR.addEventListener("click", removeHandler);
};
</script>
</head>
<body>
<div id="cEventAdd">
click event
</div>
<div id="cEventRem">
remove event
</div>
</body>3. 이벤트 객체
- 사용자가 직접 만들지 않아도 기본적으로 제공
- 속성과 메소드 존재
- 파라미터로 불러올 때의 이름은 자유 지정.(일반적으로 e, event)
- 자바에서의 try-catch와 개념이 비슷.(Exceptin e)
- 이벤트가 발생했을 때 이벤트 객체를 불러온다.
- 이벤트를 개발자가 등록했을 때 불fj올 수 있다.
ex) 마우스 클릭시 클릭한 좌표값, 이벤트를 발생시킨 객체가 어떤 것인지.
누가 넘겨줌?
웹 브라우저가 넘겨줌.
